我的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/
有什么想法吗?
最佳答案
每次您击键并导致#search
的内容被重写时,插入光标都将重新设置为div的开头,因此您键入的每个新键都将在div的开头。
如果您在键入每个键后按“结束”键,则可以看到它避免了该问题。如果您确实要重写输入的内容,则需要先保存光标位置,然后再重写数据,然后在重写数据后将其还原。
关于javascript - 为什么将数组向后写入?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18584680/