今日在某本书上看到有关如何动态统计文本域的一段js代码,发现有些小bug,对其不完善的地方做了适当的修改.
原html代码如下:
<html:textarea property="areaDescription" rows="4" cols="80" onkeydown="countStrByte(this)" onkeyup="countStrByte(this)" ></textarea>
最多允许 
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4">个字节 已用字节:
<input name="used" type="text" disabled class="noborder" id="used" value="0" size="4">剩余字节:
<input name="remain" type="text" disabled class="noborder" id="remain" value="512" size="4">
原js 代码如下:
/*
========================================================================
用于判断用户输入的字符数是否大于允许输入的字符数并计算已用字节数与剩余字节数
=======================================================================
*/
function countStrByte(message){
var byteCount=0;
var strValue=message.value;
var used=document.getElementById("used");
var total=document.getElementById("total");
var remain=document.getElementById("remain");
var strLength=message.value.length;
var maxValue=total.value;
if(lastCount!=strLength){
for(var i=0;i<strLength;i++){
byteCount=(strValue.charCodeAt(i)<=256)?byteCount+1:byteCount+2;
if(byteCount>maxValue){
message.value=strValue.substring(0,i);
alert("内容最多不能超过"+maxValue+"个字节!\n注意:一个汉字为两个字节。");
byteCount=maxValue;
break;
}
}
used.value=byteCount;
remain.value=maxValue-byteCount;
lastCount=strLength;
}
在页面上执行该代码时,发现当用户在文本域中用键盘敲入文字(触发onkeydown和onkeyup事件),将会动态统计当前输入的字节数和剩余字节数,但是如果用户将一大段文本通过右键粘贴的方式,将文字粘入文本域,统计数据不做任何变化.
再次尝试用增加onchange事件
html代码如下
<html:textarea property="areaDescription" rows="4" cols="80" onkeydown="countStrByte(this)" onkeyup="countStrByte(this)" onchange="countStrByte(this)""></textarea>
最多允许 
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4">个字节 已用字节:
<input name="used" type="text" disabled class="noborder" id="used" value="0" size="4">剩余字节:
<input name="remain" type="text" disabled class="noborder" id="remain" value="512" size="4">
发现问题依旧没有解决,这种方式下,只有光标的焦点移开文本域的时候才会重新统计.
最后在网上google了一下发现textarea还有一个onpropertychange事件, 看了网上的解释,原来该事件与onchange事件存在本质区别,onpropertychange事件是当控件里的内容一改变马上触发事件.
现在才发现原来有这么强大的事件,自然就不需要onkeydown和onkeyup事件了,去掉onkeydown和onkeyup事件,加上
onpropertychange事件,万事Ok!(注意:onpropertychange事件仅限于使用在普通的html上,使用过struts的html:textarea 标签的不包含该事件,否则会报错)
最终修改代码如下:
<textarea name="areaDescription" rows="4" cols="80" onpropertychange="countStrByte(this)"><c:out value="${landRelocateInf.areaDescription}"/></textarea>
最多允许 
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4">个字节 已用字节:
<input name="used" type="text" disabled class="noborder" id="used" value="0" size="4">剩余字节:
<input name="remain" type="text" disabled class="noborder" id="remain" value="512" size="4">
使用<c:out 标签输出值是为了防止用户输入一些html代码而产生的显示问题,通过该标签可以实现转义.
分享到:
相关推荐
Vue实现动态显示textarea剩余文字数量,具体内容如下 ...javascript代码如下: data(){ return{ remnant: 200 } } methods:{ descInput(){ var txtVal = this.desc.length; this.remnant = 200 - txtVal;
textarea剩余字数
js 特效 html 特效 对textarea框的代码调试-简单型 js 特效 html 特效 对textarea框的代码调试-简单型
js代码 [removed] //显示限制输入字符method function textAreaChange(obj){ var $this = $(obj); var count_total = $this.next().children('span').text(); var count_input = $this.next().children...
对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar对textarea框的代码调试-简单型.rar
对textarea框的代码调试.rar对textarea框的代码调试.rar对textarea框的代码调试.rar对textarea框的代码调试.rar对textarea框的代码调试.rar对textarea框的代码调试.rar
js 特效 html 特效 对textarea框的代码调试 js 特效 html 特效 对textarea框的代码调试
为原始的HTML页面中的textarea框加入行号,替代一些复杂的文本编辑器
代码如下: /* * 从新浪微博上抄的 * */ var getLength = (function(){ var trim = function(h) { try { return h.replace(/^\s+|\s+$/g, “”) } catch(j) { return h } } var byteLength = function(b) { if ...
jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
NULL 博文链接:https://diaoweili.iteye.com/blog/774179
NULL 博文链接:https://iszhao.iteye.com/blog/1142536
textarea高度自适应的jquery插件
主要为大家详细介绍了jQuery编写textarea输入字数限制代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
很方便的代码调试框架,适合对JavaScript代码的调试,欢迎参考
实现textarea限制输入字数(包含中文只能输入10个,...假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符): <script language="#" type="text/e
js和jquery分别实现对textarea字数的限制,精彩
超级加密 3000一款功能强大的文件加密和文件夹加密软件。主要针对于进常对重要文件加密和文件夹加密的用户。该软件有超快和最强的文件加密、文件夹加密功能,采用先进的加密算法,使你的文件加密和文件夹加密后,...