1

我的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/

任何想法为什么？

4

1 回答 1

1

每次您击键并导致 的内容#search被重写时，插入光标都会设置回 div 的开头，因此您键入的每个新键都会位于 div 的开头。

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

于 2013-09-03T05:29:43.390 回答