...............
<div id='id_text' class="control-group">
<label for="id_text" class="control-label">
Text
</label>
<div class="controls">
<label for="field"></label>
<textarea id="field" onkeydown="countChar(this)" maxlength="800"></textarea>
</div>
<span>Char Left:</span> <span id="charNum"> </span>
</div>
....................................
脚本:
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
function countChar(val) {
var len = val.value.length;
$('#charNum').text(800 - len);
}
</script>
注意:该脚本位于 HTML 页面的底部(我尝试将其放在顶部,但没有成功)。 脚本很简单:我只想从文本区域中获取字符数,然后向用户显示剩余的字符。
我在这里寻找其他答案,我在其他网站上寻找答案,但我认为我的代码有问题,但我不明白。
注 2:文本区域是
<form>
的一部分。我正在使用 django 框架。
非常感谢您的帮助和关注!
编辑:
我已经尝试了 Rory 的代码,这就是我所看到的。
在 JavaScript 中计算文本区域中的字符有两种方法
//injecting "hello world" (10 characters and 1 space) into the DOM
let newDiv = document.createElement("div")
let newContent = document.createTextNode(`hello world`)
newDiv.setAttribute("id", "Div1")
newDiv.appendChild(newContent)
document.body.appendChild(newDiv)
let str = document.getElementById("Div1").innerHTML
//counting the number of characters injected
alert(`LENGHT = ` + `${str.length}`); // HERE THE PROPERTY LENGTH ..
//injecting "hello world" (10 characters and 1 space) into the DOM
let newDiv = document.createElement("div")
let newContent = document.createTextNode(`hello world`)
newDiv.setAttribute("id", "Div1")
newDiv.appendChild(newContent)
document.body.appendChild(newDiv)
let str = document.getElementById("Div1").innerHTML
//first you split the content using String.prototype.split ( separator, limit ) then concatenate the array obtained by the split without spaces using : Array.prototype.join ( separator )
alert(str.split(' ').join('').length)
更新: 关于性能,遵循 @jallmer 的想法,使用方法替换 + REGEX
//injecting "hello world" (10 characters and 1 space) into the DOM
let newDiv = document.createElement("div")
let newContent = document.createTextNode(`hello world`)
newDiv.setAttribute("id", "Div1")
newDiv.appendChild(newContent)
document.body.appendChild(newDiv)
//testing algorithms perfs
let str1 = document.getElementById("Div1").innerHTML
let str2= document.getElementById("Div1").innerHTML
//testing algorithm 1
console.log(`str1 = ${str1}`)
const t0 = performance.now();
console.log(str1.split(' ').join('').length)
const t1 = performance.now()
console.log(`algorithm 1 took ${t1 - t0} milliseconds.`);
//testing method 2
console.log(`str2 = ${str2}`)
const t2 = performance.now();
console.log(str2.replace(/\s/g, '').length)
const t3 = performance.now()
console.log(`algorithm 2 took ${t3 - t2} milliseconds.`);
奇怪的是,我的 Chrome 开发工具(Chrome for Gnu/Linux,版本 90.0.4430.93(官方版本)(64 位))上的结果有所不同。要检查的东西:
keydown
事件在字段中的值更新之前触发。因此,您的 JS 会显示 previous 按键的字符计算。 keyup
是两者中更好的选择。但是,话虽这么说,您应该使用
input
事件,因为它涵盖了字段值发生变化而
keydown
/
keyup
不会发生变化的所有情况 - 例如使用鼠标复制和粘贴。另请注意,jQuery 1.5 已经严重过时了——事实上已经有 10 多年的历史了。您应该使用最新版本,在回答时是 3.6。此外,使用
onX
事件属性不再是好的做法。尝试以不显眼的方式附加事件处理程序,而不在 HTML 中包含任何 JS。当您已经使用 jQuery 时,您可以使用
on()
方法来做到这一点综上所述,试试这个:
jQuery($ => {
const $charNum = $('#charNum');
$('#field').on('input', e => {
let len = e.target.value.length;
$charNum.text(800 - len);
}).trigger('input');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id='id_text' class="control-group">
<label for="id_text" class="control-label">Text</label>
<div class="controls">
<label for="field"></label>
<textarea id="field" maxlength="800"></textarea>
</div>
<span>Char Left:</span> <span id="charNum"> </span>
</div>