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

最新推荐文章于 2025-08-12 14:37:12 发布

最新推荐文章于 2025-08-12 14:37:12 发布 · 82 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种在用户输入过程中实时显示剩余可输入字节数的方法，通过自定义JavaScript函数来计算不同字符类型的长度，并在HTML元素上绑定事件监听器以更新提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实时地提示还可以输入多少字节，用户体验更好。具体的思路是，获得用户输入信息的容器对象，并且在该对象的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>