使用jQuery的TextArea字符计数器

我无法弄清楚为什么我的JavaScript无法正常工作。 它与j Query和它应该选择所有的文本区域标签，然后为每个文本区域计算在其中键入的字符数，然后不允许用户在达到最大长度后再输入，还显示一个字符计数器在每个文本区域框下。 它的作用只是显示每个按键后剩余但不减少的字符，并且当它达到最大长度时也不会停止。 它也不会选择所有文本区域，只需要找到它的第一个区域。

这是我的TextAreaCounter.js

$(document).ready(function){ var $texts = $('textarea[maxlength]'); $texts.each(function){ $var $this = $(this), max = $(this).attr('maxlength'), textId = $(this)attr.('id'), $parent = $this.parent(), countId = textId+'-count'; $div = $('
Characters Remaining: 
').addClass('count-down').insertAfter($this); $input = $('').attr({ type:"text", readOnly: "readOnly", value: max, id: countId }).css({ width: "25px" marginTop: "5px" marginBottom: "10px" }).addClass('readOnly').appendTo($div); $this.on({ keyup: function(){ val = $this.val(), countVal = $('#'+countId).val(), if(val.length > max){ $this.val(val.substr(0,max)); alert('Max length exceeded: ' +max); return false; }else{ $('#'+countId).val(max-val.length); } }, blur: function(){ val=$this.val(); if(val.length > max){ $this.val(val.substr(0,max)); alert('Max length exceeded: ' +max); return false; }else{ $('#'+countId).val(max-val.length); } } }); }); }); 

当我添加一些警报时，这里没有显示代码，它表明它没有进入带有keyup事件的this.on部分。 我将这个外部js文件包含到我的页面制作的jsp文件中并且有我的文本区域。我还在textarea元素中添加了id和maxlength属性。 任何帮助都会非常感谢你。

Answer 1

你应该经历

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

限制文本区域中的字符

限制字符数的一种简单方法是

  Enter text here  

更多数据转到

http://www.w3schools.com/html5/att_textarea_maxlength.asp

Answer 2

哦伙计 – Donno为什么你需要上面的代码，如果你能做到这一点： http ： //jsfiddle.net/btyCz/

有限的演示 http://jsfiddle.net/jnXEy/ （我将限制设置为20）随意玩。

如果我错过了任何问题，请知道，但下面应该有帮助:)

您可以随时检查长度以限制它。

码

 $('#myInput').keyup(function() { $('#charCount').text( this.value.replace(/{.*}/g, '').length ); });​ 

HTML

  
 Counter: ​ 

Answer 3

您的代码有很多语法错误。 立即尝试：

 $(document).ready(function () { // bracket was missing here... var $texts = $('textarea[maxlength]'); $texts.each(function () { // bracket was missing here... var $this = $(this), // incorrect variable declaration here... max = $this.attr('maxlength'), textId = $this.attr('id'), // incorrect method call here... $parent = $this.parent(), countId = textId + '-count', $div = $('
Characters Remaining: 
').addClass('count-down').insertAfter($this), $input = $('').attr({ type: "text", readOnly: "readOnly", value: max, id: countId }).css({ width: "25px", // missing comma here... marginTop: "5px", // missing comma here... marginBottom: "10px" }).addClass('readOnly').appendTo($div); $this.on({ keyup: function () { var val = $this.val(), countVal = $('#' + countId).val(); // must have semicolon here... if (val.length > max) { $this.val(val.substr(0, max)); alert('Max length exceeded: ' + max); return false; } else { $('#' + countId).val(max - val.length); } }, blur: function () { var val = $this.val(); if (val.length > max) { $this.val(val.substr(0, max)); alert('Max length exceeded: ' + max); return false; } else { $('#' + countId).val(max - val.length); } } }); }); }); 

http://jsbin.com/uzohuv/3