如何防止用戶在達到最大字符數限制後在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); 
});