即時顯示剩餘可輸入的字數 效果,字母,數字,中文都算一個
目錄
即時顯示剩餘可輸入的字數
效果
#快速連結
<h2>实时显示剩余可输入的字数(字母,数字,中文都算一个字)</h2> <h>昵称:</h> <input type="text" id="myText" maxlength="15" onKeyUp="keypress1()"/> <label id="name">15</label><span>/</span><label>15</label> <br> <h>评论内容:</h><br> <textarea id="myArea" style="width: 100px;" cols="10" rows="3" onKeyUp="keypress2()" onblur="keypress2()"></textarea> <label id="pinglun">30</label><span>/</span><label>30</label>
function keypress1(){ var text1=document.getElementById("myText").value; var maxLen=document.getElementById("myText").maxLength; var len=maxLen-text1.length; document.getElementById("name").innerText=len;} function keypress2(){ var text1=document.getElementById("myArea").value; var maxLen=document.getElementById("myArea").cols*document.getElementById("myArea").rows; var len;//记录剩余字符串的长度 if(text1.length>=maxLen) { document.getElementById("myArea").value=text1.substr(0,maxLen);//只显示起始位-末尾;substr(起始位,末尾) len=0; }else{ len=maxLen-text1.length; } document.getElementById("pinglun").innerText=len;}
以上是Javascript_input、textArea即時顯示剩餘可輸入的字數的詳細內容。更多資訊請關注PHP中文網其他相關文章!