6

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

我目前有一个用于计算输入字符的文本框的 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);
4

5 回答 5

8

您是否尝试过 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();
});
于 2010-08-26T19:25:33.937 回答
6

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

于 2010-08-26T23:38:51.487 回答
4

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

PB 编辑：此后已在此处更新

于 2010-08-26T19:34:35.193 回答
1

试试下面的代码，我希望能用，记得包含 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();
            }
        });
    });    
});
于 2013-09-17T22:05:51.990 回答
0

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

于 2010-08-26T19:31:19.680 回答