‹Textarea› ограничение на количество символов

Каким кроссбраузерным способом установить максимальное количество символов в текстовой области, используя простой Javascript? maxlength не работает для текстовых полей в Opera и IE9 и ниже (хотя он работает во всех основных браузеры для входов).

По достижении предела символов текстовое поле не должно позволять вводить больше символов. Текст, вставленный с помощью Ctrl + V или контекстного меню, вызываемого правой кнопкой мыши, должен быть обрезан до предела символов. Это означает, что решения, использующего только onkey___ события, недостаточно.


javascript html textarea maxlength
person 1''    schedule 24.08.2013    source источник
comment
Это может ответить на ваш вопрос   -  person Black Sheep    schedule 24.08.2013

Ответы (1)


arrow_upward
3
arrow_downward

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

function snip(len) {
    return function (e) {e.target.value = e.target.value.slice(0, len);};
}
function prevent(len) {
    return function () {
        if (e.target.value.length >= len) {
            e.preventDefault();
            return false;
        }
    };
}

var len = 5; // choose your length however you want

var textarea = document.getElementById('texta'), // get the node
    trunc = snip(len),
    prev1 = prevent(len),
    prev2 = prevent(len - 1);

textarea.addEventListener('change'  , trunc, true);
textarea.addEventListener('input'   , trunc, true);
textarea.addEventListener('keydown' , prev2, true);
textarea.addEventListener('keypress', prev2, true);
textarea.addEventListener('keyup'   , prev1, true);
textarea.addEventListener('paste'   , trunc, true);

В IE может потребоваться другое присоединение событий.

ДЕМО

person Paul S.    schedule 24.08.2013
comment
Я также отмечу, что они сами по себе не вызывают бесконечных циклов, потому что установка value = value не запускает события изменения / ввода, но если вы вносите другие изменения, это может произойти, поэтому будьте осторожны. - person Paul S.; 24.08.2013
comment
Хороший ответ! Однако это стирает текст в конце, а не предотвращает ввод при достижении максимальной длины. Вместо того, чтобы возиться, чтобы заставить его работать, я просто выберу maxlength. Кому вообще нужна поддержка Opera и IE9? :П - person 1''; 24.08.2013