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

Question

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

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中输入任何内容。目前发生的事情是，如果用户按住按键达到最大限制，则字符在文本区域中键入，但释放按键后会回到原始文本（即$ textarea.val（$ textarea.val（））。 substr（0，max））;）。但我希望一旦这个条件成真

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

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

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) 

Answer 2

<textarea maxlength="400"> </textarea> 

使用上面的代码，以限制插入一个文本区域的字符数，如果要禁用textarea的本身（即以后不能编辑），您可以使用javascript/jquery来禁用它。

Answer 3

您可以使用this插件而不是试图编写自己的插件。我发现它工作得很好。

Answer 4

只需在您的Javascript文件中写入此代码。 但需要用textarea指定'maxlength'属性。 这将适用于页面的所有textarea。

$('textarea').bind("change keyup input",function() { 

     var limitNum=$(this).attr("maxlength"); 

     if ($(this).val().length > limitNum) { 
      $(this).val($(this).val().substring(0, limitNum)); 
     } 

    }); 

Answer 5

保持简单

var max = 50; 
$("#textarea").keyup(function(e){ 
$("#count").text("Characters left: " + (max - $(this).val().length)); 
}); 

，并在你的HTML

<textarea id="textarea" maxlength="50"></textarea> 
<div id="count"></div> 

view example

Answer 6

添加此你可以保持您的活动，因为他们，而只是用这个library

个

例子

// applying a click event to one element 

Touche(document.querySelector('#myButton')).on('click', handleClick); 

// or to multiple at once 

Touche(document.querySelectorAll('.myButtons')).on('click', handleClicks); 

// or with jQuery 

$('.myButtons').on('click', handleClicks); 

Answer 7

你可以直接给maxlength到textarea禁用本身。但是，您想要显示适当的消息，然后使用keyup事件作为默认行为，并使用textarealength来计算字符并显示合适的消息。

HTML

<div id="count"></div> 
<textarea class="max" maxlength="250" id="tarea"></textarea> 
<div id="msg"></div> 

jQuery的

$(function(){ 
    var max = parseInt($("#tarea").attr("maxlength")); 
    $("#count").text("Characters left: " + max); 
    $("#tarea").keyup(function(e){ 
     $("#count").text("Characters left: " + (max - $(this).val().length)); 
    if($(this).val().length==max) 
     $("#msg").text("Limit Reached...."); 
     else 
     $("#msg").text(""); 
    }); 
}); 

Demo Fiddle

Answer 8

对于那些在您的浏览器已经使用ES2015，下面是一个使用上面的一些答案的实现：

class InputCharacterCount { 
    constructor(element, min, max) { 
    this.element = element; 
    this.min = min; 
    this.max = max; 
    this.appendCharacterCount(); 
    } 

    appendCharacterCount(){ 
    let charCount = `<small class="char-counter help-block"></small>`; 
    this.element.closest('.form-group').append(charCount); 
    } 

    count(event){ 
    this.element.attr('maxlength', this.max); // Add maxlenght attr to input element 

    let value = this.element.val(); 
    this.element 
     .closest('.form-group') 
     .find('.char-counter') 
     .html(value.length+'/'+this.max); // Add a character count on keyup/keypress 

    if (value.length < this.min || value.length > this.max) { // color text on min/max changes 
     this.element.addClass('text-danger'); 
    } else { 
     this.element.removeClass('text-danger'); 
    } 
    } 
} 

用法：

let comment = $('[name="collection-state-comment"]'); 
let counter = new InputCharacterCount(comment, 21, 140); 
$(comment).keyup(function(event){ 
    counter.count(event); 
});