js實時計算字數提醒的文本框

2019-11-21 00:22:15

字體：大中小

來源：轉載

供稿：網友

自己想了一下應該是用JavaScript實現的，今天把它做出來了。原理很簡單就是根據文本框觸發的onkeyup事件來獲得當前文本框字符的長度，然后文本框允許輸入的最大字符數來減去當前的字符數，并用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+"個字"; 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; } </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個字</label></font>  <h3>評論內容:</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個字</label></font> <div> </center> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：IE8 chrome中table隔行換色解決辦法

下一篇：jQuery EasyUI NumberBox(數字框)的用法