如何在同一网页上有多个字符计数,而每个字符计数不会相互影响
How to have multiple character counts on the same web page without each character count affecting each other?
如何让字符数影响同一网页上的不同文本区域字段,而不影响其他字符数。我有一个id为#description
和另一个id是#another-description
的文本区域字段
HTML
<li><textarea name="description" id="description"></textarea>
<div><span class="character-count"></span></div></li>
<li><textarea name="another_description" id="another-description"></textarea>
<div><span class="character-count"></span></div></li>
Jquery
$(document).ready(function() {
var max = 4000;
$('.character-count').text('4000 characters left');
$('#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);
});
});
您可以创建一个函数,将每个变量保持在闭包中:
function countCharacters( input, output, max ) {
var $input = $(input);
var $output = $(output);
$output.text(max + ' characters left');
$input
.keydown(function(event) {
if (event.keyCode != 8 &&
event.keyCode != 46 &&
$input.val().length >= max)
event.preventDefault();
})
.keyup(function() {
var val = $input.val().slice(0, max);
var left = max - val.length;
$input.val(val);
$output.text(left + ' characters left');
});
}
countCharacters('#description', '.character-count', 4000);
countCharacters('#another_description', '.character-count-2', 3000);
编辑:要专门处理相同的类,请使用同级选择器:
countCharacters('#description', '#description + div .character-count', 4000);
countCharacters('#another_description', '#another_description + div .character-count', 3000);
只需像一样向跨度添加id
<li><textarea name="description" id="description"></textarea>
<div><span class="character-count" id="count1"></span></div></li>
<li><textarea name="another_description" id="another-description"></textarea>
<div><span class="character-count" id="count2"></span></div></li>
如果只想影响描述的计数标签,请使用id count1
$('#count1').text(left + ' characters left');
请尝试下面的代码,您的代码非常好。我已经创建了一个函数,使用它可以应用于任意多个文本字段。请参考jsfiddle-https://jsfiddle.net/sashant9/8feprLfa/
HTML-->
<span id="character-count-1" ></span>
<textarea id="description_1"></textarea>
</br></br>
<span id="character-count-2" ></span>
<textarea id="description_2"></textarea>
jQuery-->
var max = 4000;
var textbox_selector_1 = '#description_1';
var textbox_selector_2 = '#description_2';
var count_indicator_1 = '#character-count-1';
var count_indicator_2 = '#character-count-2';
textbox_character_count(count_indicator_1, textbox_selector_1);
textbox_character_count(count_indicator_2, textbox_selector_2);
function textbox_character_count(count_indicator_1, textbox_selector_1){
$(count_indicator_1).text('4000 characters left');
$(textbox_selector_1)
.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;
$(count_indicator_1).text(left + ' characters left');
$this.val(val);
});
}
相关文章:
- 在JavaScript中输出转义字符
- 不同浏览器中的空白字符正则表达式行为
- Regex匹配除“”之外的所有字符;.js”;
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 拆分文本以每隔n个字符添加一行新行,并注意空格
- 在同一个服务工作者中处理service-worker.js有任何影响吗
- 使用RegExp查找url中的字符
- jQuery工具验证器自定义效果-添加&消除影响
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- 使用正则表达式将输入格式设置为单字符逗号、单字符逗号等
- 允许在文本框中使用某些字符
- 根据页面的位置突出显示文本中的字符
- 元素的内容必须由格式正确的字符数据或标记组成
- 如何在不影响其他元素的情况下扩展DIV
- 如何将字符串拆分为字符,但在javascript中保留空格
- 使用Google Maps API向标记添加多个字符
- 处理JSON字符串会导致JavaScript错误
- 用于匹配精确单词的正则表达式会影响特殊字符匹配
- 如何在同一网页上有多个字符计数,而每个字符计数不会相互影响
- 反转字符串而不影响任何特殊字符