动态统计textarea框字数js代码的深入研究

今日在某本书上看到有关如何动态统计文本域的一段js代码,发现有些小bug,对其不完善的地方做了适当的修改.

 

原html代码如下:

<html:textarea property="areaDescription" rows="4" cols="80" onkeydown="countStrByte(this)" onkeyup="countStrByte(this)" ></textarea>
最多允许&nbsp
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4">个字节 已用字节:&nbsp; 
<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>
最多允许&nbsp
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4">个字节 已用字节:&nbsp; 
<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>
最多允许&nbsp
<input name="total" type="text" disabled class="noborder" id="total" value="512" size="4">个字节 已用字节:&nbsp;
<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代码而产生的显示问题,通过该标签可以实现转义.