带有jquery的textarea中的最大字符数

我有以下代码，我有点坚持下一步做什么。 这个想法是当你在文本区域输入文本时，计数器会告诉你剩下多少个字符。 一旦你达到最大字符我想停止允许输入字符，或删除所有输入的字符，所以文本区域只有10个字符。 我知道我必须将代码放在alert("LONG"); 但我不太清楚是什么。

 var maxLen = 10; console.log("Start"); $('#send-txt').keyup(function(){ var Length = $("#send-txt").val().length; var AmountLeft = maxLen - Length; $('#txt-length-left').html(AmountLeft); if(Length >= maxLen){ alert("LONG"); } }); 

Answer 1

在这里。 任何超出字符限制的内容都将被删除。

 $('textarea').keypress(function(e) { var tval = $('textarea').val(), tlength = tval.length, set = 10, remain = parseInt(set - tlength); $('p').text(remain); if (remain <= 0 && e.which !== 0 && e.charCode !== 0) { $('textarea').val((tval).substring(0, tlength - 1)); return false; } }) 

查看http://jsfiddle.net/JCehq/1/上的工作示例

Answer 2

所有这些答案都有点奇怪，因为他们试图做得太多。 一个更简单，视觉上更令人愉悦的方式（因为它显示文本很快被切断） – 并且前面的例子（注意它如何覆盖最终键？）的奇怪性较少 – 是简单地切断keyUp上的字符数到允许的数量。

  $('textarea').keyup(function() { var tlength = $(this).val().length; $(this).val($(this).val().substring(0,textlimit)); var tlength = $(this).val().length; remain = parseInt(tlength); $('#remain').text(remain); }); 

请注意，这也适用于粘贴文本，因为上面的一些示例没有。

示例： http ： //jsfiddle.net/PzESw/5/

Answer 3

返回false并使用.keypress（）而不是.keyup（）一旦达到长度就停止输入。 这是jsFiddle中的示例：

http://jsfiddle.net/p43BH/1/

已更新以允许退格。

Answer 4

一种简单的方法是将textarea中的文本设置为全量的子字符串。 你可以在这里找到一个例子：

http://www.mediacollege.com/internet/javascript/form/limit-characters.html

Answer 5

得到它：

 $("#div_id").prop('maxlength', '80'); 

我真的不知道这个解决方案是否有问题，但它对我有用。

Answer 6

如果你改变你的js看起来像这样它应该适合你：

 var $txtLenLeft = $('#txt-length-left'); // lets cache this since it isn't changing $('#send-txt').keydown(function(e) { //take the event argument var Length = $(this).val().length; // lets use 'this' instead of looking up the element in the DOM var AmountLeft = maxLen - Length; $txtLenLeft.html(AmountLeft); if(Length >= maxLen && e.keyCode != 8){ // allow backspace e.preventDefault(); // cancel the default action of the event } }); 

你可以在这里看到一个有用的例子： http ： //jsfiddle.net/aP5sK/2/

Answer 7

ehm，textarea maxlength是html5中的有效属性？ 在ie9中不支持，这就是全部。

w3nerds http://www.w3.org/TR/html-markup/textarea.html#textarea.attrs.maxlength

w3fools http://www.w3schools.com/tags/att_textarea_maxlength.asp

Answer 8

这是一个使用HTML5数据属性自动绑定到所有需要的textareas的解决方案：

 $('textarea[data-max-length]').live('keypress', function(e) { if (String.fromCharCode(e.charCode || e.keyCode).match(/\S/) && $(this).val().length >= $(this).attr('data-max-length')) { e.preventDefault(); } }); 

Answer 9

我知道这有点晚了，但我也必须弄清楚这一点。 我必须使用UTF8字节长度，并允许某些按键。 这就是我想出的：

 checkContent = function (event) { var allowedKeys = [8,46,35,36,37,38,39,40]; var contentLength = lengthInUtf8Bytes(jQuery(event.currentTarget).val()); var charLength = lengthInUtf8Bytes(String.fromCharCode(event.charCode)); if (charLength + contentLength > 20) { if(jQuery.inArray(event.keyCode, allowedKeys) == -1) { event.preventDefault(); } } } countLength = function(event) { var len = lengthInUtf8Bytes(jQuery(event.currentTarget).val()); jQuery('#length').html(len); } lengthInUtf8Bytes = function(str) { var m = encodeURIComponent(str).match(/%[89ABab]/g); return str.length + (m ? m.length : 0); } jQuery(function(){jQuery("#textarea").keypress(function(event){checkContent(event)}).keyup(function(event){countLength(event)})}); 

你需要一个id为#textarea的textarea和一个元素来显示id为#length的当前长度。

按键事件决定是否允许按键。 在允许/阻止按键之后，keyup事件计算字段中数据的大小。

此代码使用以下键：home，end，pagedown，pageup，backspace，delete，up，down，left和right。 它不处理从剪贴板粘贴。

希望有人发现它有用！

Answer 10

依靠keypress，keydown，keyup是一个有缺陷的解决方案，因为用户可以将数据复制并粘贴到textarea而无需按任何键。

要使用javascript限制textarea中文本的长度，无论数据如何进入，都必须依赖setInterval计时器。

 setInterval(function() { if ($('#message').val().length > 250) { $('#message').val($('#message').val().substring(0, 250)); }}, 500); 

显然，我假设你有一个id分配给你的textarea的消息。

Answer 11

试试这个。

 var charLmt = "200";//max charterer $("#send-txt").keydown(function(){ var _msgLenght = $(this).val().length; if (_msgLenght > charLmt) { $(this).val($(this).val().substring(0, charLmt)); } }); 

Answer 12

 $("#message-field").on("keyup paste", function() { var $this, limit, val; limit = 140; $this = $(this); val = $this.val(); $this.val(val.substring(0, limit)); return $('#character-remaining').text(limit - $this.val().length); }); 

Answer 13

试试这个。 甚至适用于键盘的复制粘贴：

 $("#comments").unbind('keyup').keyup(function(e){ var val = $(this).val(); var maxLength = 1000; $('#comments').val((val).substring(0, maxLength)); $("#comments_length").text($("#comments").val().length); }); 

Answer 14

我发现它的工作原理完美，甚至在删除它们之前甚至不会闪现文本区域中多余的字符，就像其他一些解决方案那样。

 
Add a comment:
 
  
 
1000 characters remaining  

Answer 15

我认为使用maxlenght属性+ jquery keydown，keyup，paste事件的最佳方式

 // text input maximum lenght $(document).on('keydown keyup paste', 'input[type=text]', function(e) { var textArea = $('input[type=text]').val(), textLenght = textArea.length, limit = $('textarea').attr('maxlength'), remain = 'left ' + parseInt(limit - textLenght) + ' chars'; $('#remain-title').text(remain); if (textLenght > 500) { $('textarea').val((textArea).substring(0, limit)) } }); // tex area maximum lenght $(document).on('keydown keyup paste', 'textarea', function(e) { var textArea = $('textarea').val(), textLenght = textArea.length, limit = $('textarea').attr('maxlength'), remain = 'left ' + parseInt(limit - textLenght) + ' chars'; $('#remain-description').text(remain); if (textLenght > 500) { $('textarea').val((textArea).substring(0, limit)) } }); 

  
 Title 
  
 
 
 
 
 Description