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

我有一个textarea，如果输入的字符达到最大长度，我想阻止输入。如何使用maxlength阻止在textarea中的进一步输入

我目前有一个用于计算输入字符的文本框的Jquery脚本，并且希望添加一些将在输入150个字符后阻止输入到textarea中的输入。

我已经尝试使用最大长度的插件与我的脚本一起使用，但它们似乎不起作用。帮助表示赞赏。

当前代码

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

来源

2010-08-26 user342391

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

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

编辑它为一个textarea在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-26 19:25:33 Robert

作品不幸 – user342391 2010-08-26 19:27:47

最大长度是不是一个有效的textarea的属性。 – 2010-08-26 19:39:04

是的，无论出于何种原因Chrome执行它，这是我测试。哦，另一种方法更新。 – Robert 2010-08-26 19:56:49

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

来源

2010-08-26 19:31:19 PleaseStand

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

PB编辑：进行了更新here

来源

2010-08-26 19:34:35 DaveB

@Peter Bailey - 感谢您更新博客文章的链接。 – DaveB 2010-08-26 19:44:23

你好得多没有试图阻止键入的字符太多，而是呈现出柜台，只有执行的字符数限制的用户，当用户试图提交。评论框Stack Overflow是一个体面的例子。对用户来说，这样做在技术上更简单，更重要的是以这种方式进行：即使您知道有字符限制，也不能将文本键入/粘贴/拖动到textarea中，这实在令人烦恼。

来源

2010-08-26 23:38:51

试试这个代码下面我希望将工作，记得包括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-17 22:05:51 Abdllah

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

回答

相关问题