Javascript中 实时的监控用户输入多少字节的信息

要实时地提示还可以输入多少字节,用户体验更好。具体的思路是,获得用户输入信息的容器对象,并且在该对象的onkeydown和onkeyup事件中调用相关函数,来计算用户还可以输入多少字节。

//定义临时变量,来存储对象的值
varmem=0;
//将中文字符的长度转换为英文字符的长度
functionutf16to8(str){
varout,i,len,c;
out
="";
len
=str.length;
for(i=0;i<len;i++){
c
=str.charCodeAt(i);
if((c>=0x0001)&&(c<=0x007F)){
out
+=str.charAt(i);
}
elseif(c>0x07FF){
out
+=String.fromCharCode(0xE0|((c>>12)&0x0F));
out
+=String.fromCharCode(0x80|((c>>6)&0x3F));
out
+=String.fromCharCode(0x80|((c>>0)&0x3F));
}
else{
out
+=String.fromCharCode(0xC0|((c>>6)&0x1F));
out
+=String.fromCharCode(0x80|((c>>0)&0x3F));
}
}
returnout;
}
//计算字符串整体长度
functionDesp_value_count(obj)
{
vartemp=document.getElementById(obj);
varstrValue=temp.value;
//去除左空格和右空格
strValue=strValue.replace(//r/g," ");
strValue
=strValue.replace(//n/g," ");
returnutf16to8(strValue).length;
}
//把对象的值暂存在一个变量中,以便执行完utf16to8函数后,把改过的对象值还原成原来的值
functionsubstr_desp(obj)
{
if(mem==0)
{
vartest=document.getElementById(obj);
mem
=test.value.length;
}
}
//带输入字符长度限制的多加入变量num
functionLimitDesp_inputN(obj,span_obj,msg1,msg2,msg3,num)
{

vartest=document.getElementById(obj);
vartest_show=document.getElementById(span_obj);
if(test)
{
varinput_num=parseInt(num);
test_show.className
="span_match_class";

if(test.value.length==0)
{
Desp_Char_Num
=(input_num+1)-Desp_value_count(obj);
mem
=0;
}
if(Desp_value_count(obj)==input_num)
{
substr_desp(obj);
test_show.innerHTML
=msg2+""+0+""+msg3;
//test.value=test.value.substr(0,mem);
returnfalse;
}
elseif(Desp_value_count(obj)>(input_num))
{
substr_desp(obj);
test_show.innerHTML
=msg1;
//test.value=test.value.substr(0,mem);
returnfalse;
}
else
{
Desp_Char_Num
=(input_num+1)-Desp_value_count(obj);
Desp_Char_Num
--;
test_show.innerHTML
=msg2+""+Desp_Char_Num+""+msg3;
mem
=0;
}
setTimeout(
"LimitDesp_inputN()",1000);
}
}

HTML调用代码如下:

<tableborder="0"cellpadding="0"cellspacing="0">
<tr>
<tdwidth="200"align="right">用户信息表:</td>
<tdwidth="71%"align="left"><input
name="szTableName"
type
="text"
id
="szTableName"
class
="input"
maxlength
="31"size="45"
onkeydown
="LimitDesp_inputN('szTableName','span_SzTableName','您所输入的内容超过长度限制','您还可以输入','个字符',31)"
onkeyup
="LimitDesp_inputN('szTableName','span_SzTableName','您所输入的内容超过长度限制','您还可以输入','个字符',31)"/>
<spanid="span_SzTableName"></span></td></tr>
</table>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页