집 >웹 프론트엔드 >JS 튜토리얼 >남은 단어 수를 계산하는 여러 줄 텍스트 상자의 Node.js 구현 함수 코드 예

남은 단어 수를 계산하는 여러 줄 텍스트 상자의 Node.js 구현 함수 코드 예

怪我咯원래의: 2017-07-04 15:06:351313검색

이 글은 주로 다줄 텍스트 상자 남은 단어 수 세기 기능의 js 구현과 관련된 지식을 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터로 살펴보겠습니다

렌더링:

코드는 다음과 같습니다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js统计文本框剩余字数</title>
  <style type="text/css">
    #area{
      width: 300px;
      height: 300px;
      resize:none;
    }
  </style>
</head>
<body>
  <textarea autofocus id="area" onkeydown="sy()" maxlength="10" placeholder="只能输入十个字"></textarea>
<!--
   resize:none 多行文本框不可以拖动
   onkeypress="sy()"键盘按住或点击时调用方法
   maxlength="10"定义最大宽度
   placeholder="只能输入十个字"  定义默认提示
   autofocus  定义自动获得焦点
   -->
  <span>你还可以输入:<strong id="span" >10</strong>个字</span>
  <input type="button" value="统计" onclick="fun();">
  <p id="p"></p>
  <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;
       //这么写的意思是申请abc三个值都为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中分别统计了小写字母、大写字母、数字的个数
       document.getElementById("p").innerHTML="大写字母有"+b+"个，小写字母有"+a+"个，数字有"+c+"个";
     }
  </script>
</body>
</html>

위 내용은 남은 단어 수를 계산하는 여러 줄 텍스트 상자의 Node.js 구현 함수 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：단어 수를 구현하는 자바스크립트 코드다음 기사：단어 수를 구현하는 자바스크립트 코드