如何使用javascript计算文本区域中键入的字符数
How to count number of typed character in textarea using javascript?
我不知道为什么当我把内部HTML放在函数中时,它不起作用,但当我在控制台中尝试时,它可以很好地工作。
这是我的密码。(用于字符计数。)
for (var i = 0; i < document.getElementsByClassName("input-content").length; i++) {
document.getElementsByClassName("input-content")[i].onkeyup = function () {
console.log(this);
var text_max = 99;
var text_length = this.value.length;
var text_remaining = text_max - text_length;
document.getElementsByClassName("character-count")[i].innerHTML = "Character count:" + text_length + "/" + text_max;
}
}
我的HTML
<textarea type="text" class="input-content"></textarea>
<p class="character-count"></p>
我知道这可能是我错过的一些愚蠢的事情。
附言:我正在寻找一个纯JavaScript的答案。请不要建议使用jQuery。
更新:当我不使用onkeyup事件,但计数没有增加时,它工作得很好
for(var i=0; i<document.getElementsByClassName("input-content").length;i++)
{
var text_max = 99;
var text_length = document.getElementsByClassName("input-content")[i].value.length;
var text_remaining = text_max - text_length;
document.getElementsByClassName("character-count")[i].innerHTML="Character count:" +text_length+"/"+text_max;
}
您可以为索引使用闭包:
for (var i = 0; i < document.getElementsByClassName("input-content").length; i++) {
document.getElementsByClassName("input-content")[i].onkeyup = function (i) {
return function () {
console.log(this);
var text_max = 99;
var text_length = this.value.length;
var text_remaining = text_max - text_length;
document.getElementsByClassName("character-count")[i].innerHTML = "Character count:" + text_length + "/" + text_max;
};
}(i);
}
<textarea type="text" class="input-content"></textarea>
<p class="character-count"></p>
问题是绑定keyup
函数时,使用i
作为character-count
元素的索引。但当您按下某个键时,i
在该点上是未定义的,因此没有索引。你可以这样做,通过设置一个属性(我使用name
),当你按下一个键时,获取该属性并将其用作索引。
textareas = document.getElementsByClassName("input-content");
charCounts = document.getElementsByClassName("character-count");
for (var i = 0; i < textareas.length; i++) {
textareas[i].setAttribute("name", i);
textareas[i].onkeyup = function() {
var text_max = 99;
var text_length = this.value.length;
var text_remaining = text_max - text_length;
charCounts[this.getAttribute("name")].innerHTML = "Character count: " + text_length + "/" + text_max;
}
}
textarea {
height: 300px;
width: 600px;
resize: none;
}
<textarea class="input-content"></textarea>
<p class="character-count"></p>
您应该将文本区域包装在一个组中,这样您就不必依赖兄弟姐妹。。。
Fiddle here:https://jsfiddle.net/hntmxLxu/
window.addEventListener('load', function () {
var groups = document.querySelectorAll(".textarea-group");
function attachListener(group) {
group.querySelector('textarea').addEventListener('keyup', function () {
group.querySelector('.textarea-group--characters').innerHTML = this.value.length;
});
}
for (var i = 0; i < groups.length; ++i) {
attachListener(groups[i]);
}
});
还有HTML。。。
<div class="textarea-group">
<textarea cols="30" rows="5"></textarea>
<p class="textarea-group--characters"></p>
</div>
<div class="textarea-group">
<textarea cols="30" rows="5"></textarea>
<p class="textarea-group--characters"></p>
</div>
相关文章:
- 文本区域JavaScript中的字符限制-特殊情况
- 更换163;使用javascript从html文本区域中提取字符
- 为文本区域提供每行的最大字符限制
- Rails 4 - 设置文本区域的字符数限制
- 如何使用javascript计算文本区域中键入的字符数
- 计算文本区域中的字符数
- 限制用户在文本区域最多粘贴(40)个字符
- 获取文本区域中字符的行和列
- 多重<text区域>具有字符计数器+行限制器的字段
- 检查任何输入或文本区域中是否存在非法字符
- 粘贴文本时删除文本区域中的字符
- 重制版字符文本区域问题
- 文本区域字符限制和空格修剪
- JavaScript 防止文本区域中的特殊字符
- 文本区域中的新行字符会增加 C# 中的文本长度
- 如何使用Javascript获取文本区域内字符中的鼠标位置
- Titanium App (iOS) 中的实时文本区域字符数
- 获取文本区域(单词、行、字符)的统计信息
- JQuery 字符限制器,同时忽略文本区域中的空格
- 如何通过javascript在文本区域中插入/删除字符