jquery - 如何防止用户在达到最大字符数限制后在文本区域中输入文本

Question

我想阻止用户在达到最大字符限制后在文本区域中输入文本。当我达到最大限制时发生了什么，然后我的文本区域滚动条移到顶部，我以某种方式用此代码阻止了这种情况。

jQuery(document).ready(function($) {
    $('textarea.max').keyup(function() {
        var $textarea = $(this);
        var max = 400;
        if ($textarea.val().length > max) {
            var top = $textarea.scrollTop();
            $textarea.val($textarea.val().substr(0, max));
            $textarea.scrollTop(top);

        }
    });
}); //end if ready(fn)

但我也希望在达到最大限制后，用户无法在文本区域中输入任何内容。目前，如果用户按住按键达到最大限制后，字符会在文本区域中输入，尽管释放按钮后会返回原始文本(即 $textarea.val($textarea.val(). substr(0, 最大值));)。但我希望一旦这个条件成为现实

if ($textarea.val().length > max) {

用户无法输入任何内容。我希望光标从文本区域消失。但是，如果用户删除一些文本，则光标也可供用户再次键入输入。我该怎么做？

Answer 1

keyup 事件在默认行为(填充文本区域)发生后触发。

最好使用keypress事件，并过滤不可打印的字符。

演示:http://jsfiddle.net/3uhNP/1/ (最大长度为 4)

jQuery(document).ready(function($) {
    var max = 400;
    $('textarea.max').keypress(function(e) {
        if (e.which < 0x20) {
            // e.which < 0x20, then it's not a printable character
            // e.which === 0 - Not a character
            return;     // Do nothing
        }
        if (this.value.length == max) {
            e.preventDefault();
        } else if (this.value.length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
        }
    });
}); //end if ready(fn)