Почему IE 8 заставляет курсор перейти к концу текстовой области для этого JS? - PullRequest
Новая
       16

Почему IE 8 заставляет курсор перейти к концу текстовой области для этого JS?

4 голосов
/ 01 августа 2011

http://jsfiddle.net/tYXTX/

В Firefox с помощью вышеуказанного скрипта (включенного ниже) вы можете редактировать содержимое текстовой области, щелкая по центру строки и печатая, или используя клавиатуруклавиши назад (и ctrl + стрелка влево).

В IE курсор всегда прыгает до конца.Почему это так и как я могу предотвратить это?

HTML: 

<textarea id="bob" name="bob">Some textarea content</textarea>
<div id="debug"></div>

JS: 

$(document).ready(function(){
    $("#bob").keyup(function(){
        $("#bob").val($("#bob").val().substring(0,160));
        $("#debug").append("\n+");
    }); 
});

Ответы [ 2 ]

3 голосов
/ 01 августа 2011

Вместо усечения $ ("# bob") с использованием substring() каждый раз, делайте это только тогда, когда длина текста превышает 160: 

$(document).ready(function(){
    var oldtext = $("#bob").val();

    $("#bob").keyup(function(){
        if( $("#bob").val().length > 160 )
            $("#bob").val(oldtext);
        else
            oldtext = $("#bob").val();

        $("#debug").append("\n+");
    });
});

В IE всякий раз, когда изменяется <textarea>, курсор переходит к концу.

3 голосов
/ 01 августа 2011

Я предполагаю, что IE очищает значение текстового поля и затем вставляет новый текст. В результате позиция каретки теряется.

Что вы можете сделать, это сохранить позицию каретки в памяти и восстановить ее после установки значения: http://jsfiddle.net/pimvdb/tYXTX/3/.

$(document).ready(function(){
    $("#bob").keyup(function(){
        var caretPosition = $("#bob").prop("selectionStart"); // caret position

        $("#bob").val($("#bob").val().substring(0,160));

        $("#bob").prop({selectionStart: caretPosition,   // restore caret position
                        selectionEnd:   caretPosition});
        // if start == end, it defines the caret position as selection length == 0

        $("#debug").append("\n+");
    }); 
});
...