js實(shí)時(shí)計(jì)算字?jǐn)?shù)提醒的文本框

更新時(shí)間：2010年07月09日 00:11:35 作者：

那天在一個(gè)論壇上看到一個(gè)相當(dāng)有意思的功能，就是在文本框中輸入字符的時(shí)候，旁邊會(huì)提示還可以輸入多少個(gè)字。

自己想了一下應(yīng)該是用JavaScript實(shí)現(xiàn)的，今天把它做出來了。原理很簡單就是根據(jù)文本框觸發(fā)的onkeyup事件來獲得當(dāng)前文本框字符的長度，然后文本框允許輸入的最大字符數(shù)來減去當(dāng)前的字符數(shù)，并用label控件顯示出來就可以了。
效果圖:

演示代碼:

<html> <head> <title>enter</title> <script language="javascript"> function keypress1() //text輸入長度處理 { var text1=document.getElementById("mytext1").value; var len=15-text1.length; var show="你還可以輸入"+len+"個(gè)字"; document.getElementById("name").innerText=show; } function keypress2() //textarea輸入長度處理 { var text1=document.getElementById("myarea").value; var len;//記錄剩余字符串的長度 if(text1.length>=300)//textarea控件不能用maxlength屬性，就通過這樣顯示輸入字符數(shù)了 { document.getElementById("myarea").value=text1.substr(0,300); len=0; } else { len=300-text1.length; } var show="你還可以輸入"+len+"個(gè)字"; document.getElementById("pinglun").innerText=show; } </script> </head> <body> <center> <div style="text-align:left;"> <h3>昵稱:</h3> <input type="text" id="mytext1" maxlength=15 onKeyUp="keypress1()"/> <font color="gray"><label id="name">你還可以輸入15個(gè)字</label></font>  <h3>評(píng)論內(nèi)容:</h3><br> <textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden" onKeyUp="keypress2()" onblur="keypress2()"></textarea> <font color="gray"><label id="pinglun">你還可以輸入300個(gè)字</label></font> <div> </center> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: