我无法弄清楚为什么我的 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 = $('<div>Characters Remaining: </div>').addClass('count-down').insertAfter($this);
$input = $('<input></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 属性。 任何帮助都会非常感谢。
最佳答案
哦,伙计 - 如果你能做到这一点,不知道为什么你需要上面的代码:http://jsfiddle.net/btyCz/
有限演示 http://jsfiddle.net/jnXEy/ (我已将限制设置为 20)随意玩。
如果我遗漏了什么,请告诉我,但下面的内容应该会有所帮助:)
您始终可以检查长度以限制它。
代码
$('#myInput').keyup(function() {
$('#charCount').text( this.value.replace(/{.*}/g, '').length );
});
HTML
<textarea id="myInput"></textarea> <br>
Counter: <span id="charCount"></span>
关于javascript - 使用 jQuery 的 TextArea 字符计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11839413/