在輸入一定數量的字符後，禁止用戶將文本輸入到textarea字段中

Question

我試圖阻止用戶在字符數達到極限後將數據輸入到textarea。即使頁面刷新後，字符數是否可以跟蹤輸入了多少個字符？

Jquery的

$('.character-count').text('4000 characters left'); 
    $('#description').keyup(function(){ 
     var max = 4000; 
     var len = $(this).val().length; 
     var ch = max - len; 
     $('.character-count').text(ch + ' characters left'); 
    }); 

Answer 1

嘗試這種情況：

var max = 10; 

$('#description') 
.keydown(function(event){ 
    if (event.keyCode != 8 && event.keyCode != 46 && $(this).val().length >= max) { 
     event.preventDefault(); 
    } 
}) 
.keyup(function(){ 
    var $this = $(this), 
     val = $this.val().slice(0, max), 
     val_length = val.length, 
     left = max - val_length; 

    $('.character-count').text(left + ' characters left'); 

    $this.val(val); 
}); 

後後max符號均KEYUP textarea的值被切斷。
keydown事件阻塞後值長度達到max，
但你仍然可以按Backspace（8）或刪除（46)鍵。

Answer 2

有一個內置的HTML5屬性maxlength，這將限制進入的符號計數有沒有必要自己重塑它：

$("input").on('input', function() { 
 
    var left = this.maxLength - this.value.length; 
 
    $("span").text(left + " characters left"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" maxlength="5"/> 
 
<span>5 characters left</span>

另外，如果你使用keyup漢dler，那麼用戶可以在其他地方輕鬆地輸入文字，並粘貼儘可能多的字符。使用input。

說到「即使在刷新頁面後也要記錄輸入了多少字符」，您可以使用cookie，但這是一個值得懷疑的功能。任何用戶都可以輕鬆更換或清空任何Cookie或其他本地存儲。如果此限制非常重要，請在服務器端實施。

Answer 3

您可以按照coolguy的建議將用戶輸入的整個文本保存在cookie中，刷新後您可以檢索cookie數據並顯示在文本區域以及字符數跟蹤器中。

<script> 
     $(function() { 
      var descText = $.cookie('description'); 
      var descTextArea = $('#description'); 
      var maxLength = descTextArea.data('maxLength'); 
      if (descText) { 
       descTextArea.text(descText); 
       $('.character-count').text((maxLength - descText.length) + ' characters left'); 
      } 
      else { 
       $('.character-count').text(maxLength + ' characters left'); 

      } 
      descTextArea.keydown(function (event) { 
       var max = maxLength; 
       var len = $(this).val().length; 
       var ch = max - len; 
       if (ch < 0) { 
        event.preventDefault(); 
        return false; 
       } 
       $('.character-count').text(ch + ' characters left'); 
       $.cookie('description', $(this).val(), {path: '/'}); 
      }); 
     }); 
    </script> 

使用keydown引用由legotin回答後。 HTML文件是：

<textarea id="description" data-max-length="4000"></textarea> 
<span class="character-count"></span> 

我使用jquery.cookie插件。

Answer 4

使用e.preventDefault（）停止處理。

e.preventDefault(); 


$('.character-count').html('20 characters left'); 
var len = 0; 
var max = 20; 
$('#description').keydown(function (e) { 
    var code = e.keyCode; 
    if(len == max && code != 8) 
    { 
     e.preventDefault(); 
     return false; 
    } 
    len = $(this).val().length; 
    var ch = max - len; 
    $('.character-count').text(ch + ' characters left'); 
}); 

試試這個 Fiddle

Answer 5

使用本地存儲，以應對以後的使用

HTML

<textarea name="userText" id="description" cols="30" rows="10"></textarea> 
<div class="character-count"></div> 

jQuery的

$(function(){ 
    var comment = $('#description'); 
    var val = localStorage.getItem(comment.attr('id')), 
     max = 4000, 
     len = val.length, 
     left = (max - len) ; 
    // if the value exists, set it 
    if (val) { 
     comment.val(val); 
     $('.character-count').text(left + ' Character(s) left'); 
    } 
}); 

$('#description').on('keyup', function (e) { 
    var $this = $(this), 
     max = 4000, 
     val = $this.val(), 
     val_length = val.length, 
     remain = ((max - val_length)>=0)?(max - val_length):0; 

    $('.character-count').text(remain + ' Character(s) left'); 
    if(val_length > max){ 
     $this.val(val.slice(0,max)); 
    } 
    // let's check if localStorage is supported 
    if (window.localStorage) { 
     localStorage.setItem($(this).attr('id'), $(this).val()); 
    } 


}); 

SEE DEMO