javascript - 为什么数组要倒着写？

Question

我的html:

<div id="search" contenteditable="true"></div>

我的js:

var clrz = ['#ad13f6','#3f00d0','#00ff7e']

$('#search').bind('input', function() {

    var s = $('#search').text();
    var a = s.split('');
    for (var i = 0; i < a.length; i++) {
        var ran = Math.floor(Math.random()*3);
        var clr = clrz[ran];
        a[i] = '<span style="color:'+clr+';">' + a[i] +'</span>'
    };
    $('#search').html(a);

});

如果我删除重写 div 的最后一行( $('#search').html(a) )，并将数组 ( a ) 记录到控制台，它会按顺序显示。但是当我尝试用 .html(a) 重写它时，它会向后显示？？？

这是一个 fiddle :http://jsfiddle.net/kAvEm/

有什么想法吗？

Answer 1

每次您按下按键并导致 #search 的内容被重写时，插入光标都会被设置回 div 的开头，因此您键入的每个新键都会出现在该 div 的开头该div。

如果在键入每个键后按“结束”键，您会发现它避免了该问题。如果您确实想重写正在键入的内容，那么您需要在重写数据之前保存光标位置，然后在重写数据后恢复它。