Проверка кол-во символов ввели в поле, есть ошибка, перекидывает в конец текста, как исправить?

Question

[Антон Вебсайтовский]

Здравствуйте, для некоторых полей на сайте я задал ограничение по вводу символов, и добавил скрипт который показывает сколько ввели букв, так вот по началу я не заметил что если править текст и где то в середине текста править букву или дописывать, то он перекидывает в конец текста, если поставить слешик и попробовать писать.

Я понял что это проблема в js, который подсчитывает сколько букв ввели, в мозилле все ок, в хроме перекидывает в конец, помогите поправить js, в чем проблема подскажите.

<script>

    $(function () {
        var maxLength = $('#textarea').attr('maxlength');
        $('#textarea').keyup(function () {
            var curLength = $('#textarea').val().length;
            $(this).val($(this).val().substr(0, maxLength));
            var remaning = maxLength - curLength;
            if (remaning < 0) remaning = 0;
            $('#textareaFeedback').html(' - осталось ( ' + remaning + ' ) символов ');
            if (remaning < 15) // когда менять цвет
            {
                $('#textareaFeedback').addClass('warning')
            }
            else {
                $('#textareaFeedback').removeClass('warning')
            }
        })
    })
</script>

Answer 1

[Виталий Инчин ☢]

1) Используйте не keyup, а input.
2) Вы меняете значение поля, когда в нем установлен фокус. Вполне естественно, что слетает позиция ввода. Выход довольно прост - нужно использовать свойства selectionStart/End (или setSelectionRange).

var $area = $("#textarea"), $feed = $("#textareaFeedback");

$('#textarea').on("input", function(){
   var val = this.value, selStart = this.selectionStart;

   val.length > maxLength && $area
       .val( val.substr(0, maxLength) )
       .prop({
          selectionStart : selStart,
          selectionEnd : selStart
       })
   ;
   
    var remaning = Math.max(maxLength - val.length, 0);
    $feed.html(' - осталось ( ' + remaning + ' ) символов ')
        .toggleClass('warning', remaning < 15);
});

jsfiddle.net/In4in/nyg7dy3o

Я так понял, вас поддержка maxlength не устраивает?

Comments

[Антон Вебсайтовский]

Здравствуйте, устраивает, но оно не выводит сколько букв я ввел.

[Виталий Инчин ☢]

Антон Вебсайтовский: а для чего тогда в коде присутствует строка, замещающая по работе сам maxlength?

А конкретно $(this).val($(this).val().substr(0, maxLength)); укорачивает значение textarea, если оно больше по длине.

Answer 2

[Rsa97]

$(this).val($(this).val().substr(0, maxLength));
Уберите эту строку. Вы полностью переписываете значение поля, разные браузеры могут вести себя при этом по разному. Кроме того, уже задан атрибут maxlength и такое дополнительное ограничение смысла не имеет.
Кстати, кроме keyup надо обрабатывать ещё paste и cut.