<text区域>字符限制

<textarea> character limit

本文关键字：字符 区域 lt text gt      更新时间：2023-09-26

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

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

生成函数，这些函数将截断值或在您的条件下阻止事件发生，然后将它们添加为您感兴趣的所有事件的几个不同侦听器。

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

相关文章：