实时计字数提醒的文本框
那天在一個**論壇上看到一個相當有意思的功能，就是在文本框中輸入字符的時候，旁邊會提示還可以輸入多少個字。
自己想了一下應該是用JavaScript實現(xiàn)的，今天把它做出來了。原理很簡單就是根據(jù)文本框觸發(fā)的onkeyup事件來獲得當前文本框字符的長度，然后文本框允許輸入的最大字符數(shù)來減去當前的字符數(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+"個字";
?? 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+"個字";
?? 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>評論內(nèi)容:</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>
運行的界面如下：
總結(jié)
以上是生活随笔為你收集整理的实时计字数提醒的文本框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 31 天重构学习笔记28. 为布尔方法命
- 下一篇： boost::asio::ip::tcp