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）），我将arrary（a）记录到控制台，它按顺序出来。但是当我尝试用.html（a）重写它时，它向后出来????

这是一个小提琴：http://jsfiddle.net/kAvEm/

任何想法为什么？

Answer 1

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

如果在键入每个键后点击“结束”键，则可以看到它可以避免此问题。如果你真的想要重写输入的内容，那么你需要在重写数据之前保存光标位置，然后在重写数据后恢复它。

为什么数组被倒退？

1 个答案: