JS實現動態提示文本框可輸入剩余字數(類似發表微博數字提示)


一、實現效果:

為了更直觀的體現用戶在文本框輸入文本時能看到自己輸入了多少字,項目中需要通過判斷提示文本框剩余可輸入字數。

html & JS:

 1 <div>
 2 <textarea name="content" id="content"  onkeyup="javascript:checkWords(this);" 
onmousedown
="javascript:checkWords(this);" ></textarea> 3 </div> 4 <div> 5 還可以輸入<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">80</span>個漢字 6 </div> 7 8 <script> 9 var maxstrlen=80; 10 function Q(s){ 11 return document.getElementById(s); 12 } 13 function checkWords(c){ 14 len=maxstrlen; 15 var str = c.value; 16 myLen = getStrleng(str); 17 var wck=Q("wordCheck"); 18 if(myLen>len*2){ 19 c.value=str.substring(0,i+1); 20 }else{ 21 wck.innerHTML = Math.floor((len*2-myLen)/2); 22 } 23 } 24 function getStrleng(str){ 25 myLen = 0; 26 i = 0; 27 for(;(i<str.length)&&(myLen<=maxstrlen*2);i++){ 28 if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128) 29 myLen++; 30 else 31 myLen+=2; 32 } 33 return myLen; 34 }


以上可以動態判斷文本框可輸入剩余字數,資料來自網絡。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM