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) ) を削除し、配列 ( a ) をコンソールに記録すると、順番に表示されます。しかし、.html(a)で書き直そうとすると逆に出てくる????

ここにフィドルがあります：http://jsfiddle.net/kAvEm/

なぜアイデアはありますか？

4

1 に答える 1

1

キーストロークを押して の内容が#search書き換えられるたびに、挿入カーソルが div の先頭に戻されるため、入力した新しいキーはそれぞれ div の先頭に配置されます。

各キーを打ち込んだ後に「終了」キーを押すと、問題が回避されることがわかります。入力されているものを本当に書き換えたい場合は、データを書き換える前にカーソル位置を保存し、データを書き換えた後に復元する必要があります。

于 2013-09-03T05:29:43.390 に答える