实时计字数提醒的文本框
那天在一個**論壇上看到一個相當有意思的功能，就是在文本框中輸入字符的時候，旁邊會提示還可以輸入多少個字。
自己想了一下應該是用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;">
<h>昵稱:</h>
<input type="text" id="mytext1" maxlength=15 onKeyUp="keypress1()"/>
<font color="gray"><label id="name">你還可以輸入15個字</label></font>
<br>
<h>評論內容:</h><br>
<textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden"?? onKeyUp="keypress2()" οnblur="keypress2()"></textarea>
<font color="gray"><label id="pinglun">你還可以輸入300個字</label></font>
<div>
</center>
</body>
</html>
運行的界面如下：
總結
以上是生活随笔為你收集整理的实时计字数提醒的文本框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 31 天重构学习笔记28. 为布尔方法命
- 下一篇： boost::asio::ip::tcp