[英]How can I count the characters from a textarea?
............... <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 页面的底部(我试图将其放在顶部,但徒劳无功)。 脚本很简单:我只想从 textarea 中获取字符数,然后将剩余的字符显示给用户。
我在这里寻找其他答案,我在其他网站上寻找答案,但我认为我的代码有问题,我不明白。
注意 2: textarea 是<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 的想法使用方法replace + 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 正在显示上一次按键的字符计算。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.