快捷導(dǎo)航

js實(shí)現(xiàn)多行文本框統(tǒng)計(jì)剩余字?jǐn)?shù)功能

更新時(shí)間：2017年03月28日 09:00:02 作者：kb碼農(nóng)

本文主要介紹了js實(shí)現(xiàn)多行文本框統(tǒng)計(jì)剩余字?jǐn)?shù)功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

效果圖：

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js統(tǒng)計(jì)文本框剩余字?jǐn)?shù)</title>
  <style type="text/css">
    #area{
      width: 300px;
      height: 300px;
      resize:none;
    }
  </style>
</head>
<body>
  <textarea autofocus id="area" onkeydown="sy()" maxlength="10" placeholder="只能輸入十個(gè)字"></textarea>
<!--
   resize:none 多行文本框不可以拖動(dòng)
   onkeypress="sy()"鍵盤按住或點(diǎn)擊時(shí)調(diào)用方法
   maxlength="10"定義最大寬度
   placeholder="只能輸入十個(gè)字"  定義默認(rèn)提示
   autofocus  定義自動(dòng)獲得焦點(diǎn)
   -->
  <span>你還可以輸入:<strong id="span" >10</strong>個(gè)字</span>
  <input type="button" value="統(tǒng)計(jì)" onclick="fun();">
  <div id="div"></div>
  <script type="text/javascript">
     function sy() {
       var num=document.getElementById("area").value.length;
       //console.log(num);
       var sheng=10-num;
       if(sheng==0){
         //變顏色為紅色
         console.log(sheng);
         document.getElementById("span").style.color="#ff0000";
       }else{
         //變顏色為黑色
         document.getElementById("span").style.color="#000000";
       }
       document.getElementById("span").innerHTML=sheng;
     }
     function fun(){
       var txt=document.getElementById("area").value;
       //這么寫的意思是申請(qǐng)abc三個(gè)值都為0
       var a=b=c=0;
       for(var i=0;i<txt.length;i++){
         var ch=txt.charAt(i);
         if(ch>="a"&&ch<="z"){
           a++;
         }else if(ch>="A"&&ch<="Z"){
           b++;
         }else if(ch>="0"&&ch<="9"){
           c++;
         }
       }
       //abc中分別統(tǒng)計(jì)了小寫字母、大寫字母、數(shù)字的個(gè)數(shù)
       document.getElementById("div").innerHTML="大寫字母有"+b+"個(gè)，小寫字母有"+a+"個(gè)，數(shù)字有"+c+"個(gè)";
     }
  </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: