如何使用maxlength阻止textarea中的进一步输入 [英] How can I block further input in textarea using maxlength

问题描述

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

I have a textarea that I want to block input on if the entered characters reaches a max-length.

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

I currently have a Jquery script for the textbox that calculates the characters entered and want to add something that will block input in the textarea once 150 characters are entered.

我尝试将max-length插件与我的脚本结合使用，但它们似乎不起作用。感谢帮助。

I have tried using max-length plugins in conjunction with my script but they don't seem to work. Help is appreciated.

当前代码

(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);

推荐答案

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

You're much better off not trying to prevent the user from typing in too many characters and instead showing a counter and only enforcing the character limit when the user tries to submit. The comment boxes Stack Overflow are a decent example. It's both easier technically and more importantly better for the user to do it this way: it's really irritating not to be able to type/paste/drag text into a textarea even if you know there's a character limit.

这篇关于如何使用maxlength阻止textarea中的进一步输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！