js实时计算字数提醒的文本框 | 学步园

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

js实时计算字数提醒的文本框

2012年11月02日 ⁄ 综合 ⁄ 共 673字 ⁄ 字号小中大 ⁄ 评论关闭

文章目录

昵称:
评论内容:

自己想了一下应该是用JavaScript实现的，今天把它做出来了。原理很简单就是根据文本框触发的onkeyup事件来获得当前文本框字符的长度，然后文本框允许输入的最大字符数来减去当前的字符数，并用label控件显示出来就可以了。
效果图:

演示代码:

<script language="javascript"> 
function keypress1() //text输入长度处理 
{ 
var text1=document.getElementById("mytext1").value; 
var len=15-text1.length; 
var show="你还可以输入"+len+"个字"; 
document.getElementById("name").innerText=show; 
} 
function keypress2() //textarea输入长度处理 
{ 
var text1=document.getElementById("myarea").value; 
var len;//记录剩余字符串的长度 
if(text1.length>=300)//textarea控件不能用maxlength属性，就通过这样显示输入字符数了 
{ 
document.getElementById("myarea").value=text1.substr(0,300); 
len=0; 
} 
else 
{ 
len=300-text1.length; 
} 
var show="你还可以输入"+len+"个字"; 
document.getElementById("pinglun").innerText=show; 
} </p>
<p></script><center> </p>
<div style="text-align:left;">
<h4 id="title-0">昵称:</h4>
<p><input type="text" id="mytext1" maxlength="15" onkeyup="keypress1()"><font color="gray"><label id="name">你还可以输入15个字</label></font> </p>
<h4 id="title-1">评论内容:</h4>
<p><textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden" onkeyup="keypress2()" onblur="keypress2()"><font color="gray"><label id="pinglun">你还可以输入300个字</label></font> </p>
<div>
</div>
<p>

返回

【上篇】深入浅出WPF——x:Class详解
【下篇】[转]应该被记住的天才，写在图灵诞辰100周年

作者: hillcrest

该日志由 hillcrest 于12年前发表在综合分类下，最后更新于 2012年11月02日.
转载请注明: js实时计算字数提醒的文本框 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园保留所有权利.
软文销售 QQ客服：2265327166

点击这里给我发消息

（其他合作也可洽谈）