如何使用 maxlength 阻止 textarea 中的进一步输入答案

【问题标题】：How can I block further input in textarea using maxlength如何使用 maxlength 阻止 textarea 中的进一步输入
【发布时间】：2010-08-26 19:19:14
【问题描述】：

我有一个文本区域，如果输入的字符达到最大长度，我想阻止输入。

我目前有一个用于计算输入字符的文本框的 Jquery 脚本，并且想要添加一些内容，一旦输入 150 个字符，就会阻止文本区域中的输入。

我尝试将最大长度插件与我的脚本结合使用，但它们似乎不起作用。感谢您的帮助。

当前代码

(function($) {
    $.fn.charCount = function(options){
        // default configuration properties
        var defaults = {    
            allowed: 150,       
            warning: 25,
            css: 'counter',
            counterElement: 'span',
            cssWarning: 'warning',
            cssExceeded: 'exceeded',
            counterText: '',
            container: undefined // New option, accepts a selector string
        }; 

        var options = $.extend(defaults, options); 

        function calculate(obj,$cont) {
              // $cont is the container, now passed in instead.
            var count = $(obj).val().length;
            var available = options.allowed - count;
            if(available <= options.warning && available >= 0){
                $cont.addClass(options.cssWarning);
            } else {
                $cont.removeClass(options.cssWarning);
            }
            if(available < 0){
                $cont.addClass(options.cssExceeded);
            } else {
                $cont.removeClass(options.cssExceeded);
            }
            $cont.html(options.counterText + available);
        };

        this.each(function() {
         // $container is the passed selector, or create the default container
            var $container = (options.container)
                    ? $(options.container)
                        .text(options.counterText)
                        .addClass(options.css)
                    : $('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>').insertAfter(this);
            calculate(this,$container);
            $(this).keyup(function(){calculate(this,$container)});
            $(this).change(function(){calculate(this,$container)});
        });

    };
})(jQuery);

【问题讨论】：

标签： javascript jquery maxlength

【解决方案1】：

你试过maxlength属性吗？一旦达到字符限制，这将阻止输入。

<textarea maxlength='150'></textarea> // Won't work
<input type='text' maxlength='150' />

编辑似乎 textarea 的 maxlength 在 Chrome 中有效，但在其他浏览器中无效，我的错。好吧，另一种方法是监视 keydown 事件，如果长度>150，则返回 false/preventDefault/但是您想停止默认操作。但是，您仍然希望允许退格并输入，因此还要监控键码。

$('#yourTextarea').keydown(function(e) {
    if (this.value.length > 150) 
        if ( !(e.which == '46' || e.which == '8' || e.which == '13') ) // backspace/enter/del
            e.preventDefault();
});

【讨论】：

适用于输入，但不幸的是不适用于文本区域
maxlength 不是有效的 textarea 属性。
是的，无论出于何种原因，Chrome 都会强制执行它，这是我测试过的。哦，好吧，另一种方法更新了。
检查的特殊字符不足。例如，在达到长度限制后，仅在文本区域移动插入符号是不可能的。
maxlength 是文本区域的 HTML5 属性，Opera 或 IE 不支持 w3schools.com/tags/att_textarea_maxlength.asp

【解决方案2】：

最好不要试图阻止用户输入太多字符，而是显示一个计数器，并且只在用户尝试提交时强制执行字符限制。评论框 Stack Overflow 就是一个不错的例子。这样做在技术上更容易，更重要的是对用户来说更好：即使您知道有字符限制，也不能将文本输入/粘贴/拖动到文本区域中，这真的很烦人。

【讨论】：

【解决方案3】：

Textarea maxlength with Jquery 工作正常，但可能无法解决粘贴大量文本的问题。

PB 编辑：已更新here

【讨论】：

@Peter Bailey - 感谢更新博客文章的链接。

【解决方案4】：

试试下面这段代码，希望能用，记得包含 jQuery 库

<div class="texCount"></div>
<textarea class="comment"></textarea>

$(document).ready(function(){
    var text_Max = 200;      
    $('.texCount').html(text_Max+'Words');

    $('.comment').keyup(function(){        
        var text_Length = $('.comment').val().length;        
        var text_Remain = text_Max - text_Length;       
        $('.texCount').html(text_Remain + 'Words');

        $('.comment').keydown(function(e){         
            if(text_Remain == 0){
                e.preventDefault();
            }
        });
    });    
});

【讨论】：

【解决方案5】：

如http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/ 所述，如果文本区域的内容超过 150 个字符，您可以截断它。如果这会使文本超出限制，我可以看到一些复制/粘贴问题。

【讨论】：