使用jQuery的TextArea字符计数器
TextArea character counter using jQuery
我很难弄清楚为什么我的JavaScript不能正常工作。它的jQuery和它应该选择所有的文本区域标记,然后为每个文本区域计算键入的字符数,然后在达到最大长度后不允许用户再输入,还在每个文本区域框下显示一个字符计数器。它所做的只是显示剩余的字符,但在每次按键后不会递减,而且在达到最大长度时也不会停止。它也不会选择所有的文本区域,只会选择找到的第一个区域。
这是我的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文件中,我的页面就是在这个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>
您应该通过
http://www.mediacollege.com/internet/javascript/form/limit-characters.html
限制文本区域中的字符
限制charecter数量的一个简单方法是
<textarea maxlength="50">
Enter text here
</textarea>
欲了解更多数据,请访问
http://www.w3schools.com/html5/att_textarea_maxlength.asp
您的代码有许多语法错误。现在试试这个:
$(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 = $('<div>Characters Remaining: </div>').addClass('count-down').insertAfter($this),
$input = $('<input></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
- js中的字符计数器
- 使用jQuery的TextArea字符计数器
- 多重<text区域>具有字符计数器+行限制器的字段
- 表单输入的字符计数器 - 不计数
- 字符计数器不会打印所有字符
- 键盘事件、字符计数器和textLength道具困境
- firefox中的javascript字符计数器
- 字符计数器和限制器收到 Nan 错误
- 如何在simple_form中实现基本字符计数器
- 在数据库中存储10个UTF8字符而不丢失文本字符计数器
- JavaScript文本区字符计数器插入标签
- 剩余字符计数器弹出
- 二维数组中的字符计数器
- Jquery验证与字符计数器插件
- 字符计数器在表中重复回显时不起作用
- asp.net mvc-带参数的Javascript字符计数器功能
- 如何在EXT.JS中构建一个具有字符计数器和最大长度的文本区域
- 字符计数器上出现奇怪的jQuery错误
- 在页面刷新时以正确的数字启动字符计数器
- 字符计数器应该截断文本,但在复制文本时不这样做