javascript - <textarea> 字符限制

Question

使用纯 JavaScript 设置文本区域中最大字符数的跨浏览器方式是什么？ maxlength 不适用于 Opera 和 IE9 及以下版本的文本区域(尽管它适用于所有主要浏览器的输入)。

一旦达到字符限制，文本区域不应允许输入更多字符。使用 Ctrl+V 或右键单击上下文菜单粘贴的文本应在字符限制处被 chop 。这意味着解决方案仅使用 onkey___事件还不够。

Answer 1

生成函数，在您的条件下 chop 值或阻止事件，然后将它们添加为所有不同的监听器您感兴趣的事件。

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