<textarea> лимит символов

Question

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

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

Answer 1

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

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

DEMO