2017-08-16 116 views
0

所以我試圖讓某人在「textarea」中鍵入並在輸入時顯示迄今爲止的字符數。下面的代碼是我正在嘗試使用計數器的字段。我想通過工作故障排除來獲得字符計數器。任何想法如何我可以去做呢?實時字符計數器

<tr> 
        <td width="70%"> 
         <b>Troubleshooting</b><br /> 
        </td> 
        <td width="30%"> 
         <a href="javascript: validateHP()" onMouseover="buttonObject_HP.src='images/hp_1.png'" onMouseout ="buttonObject_HP.src='images/hp_0.png'"> 
         &nbsp;<img name="buttonObject_HP" src="images/hp_0.png" border=0 alt="" width="75" height="20"/></a>   
        </td> 
       </tr> 
      </table> 
      <textarea class="normal" id="Reported" name="Reported" rows="12" cols="51" onchange="validateText();"></textarea> 
+1

的可能的複製[計數textarea中的字符](https://stackoverflow.com/questions/5371089/count-characters-in-textarea) – Nisarg

+0

我想這和它不是我想要。我試圖讓它通過疑難解答(50個字符)排除故障。那個有一個字符限制。我不想限制它,我想顯示您的金額。往上走。 – Tacoma

回答

0

我做了如下得到我想要的東西。

擺在頭下面

<script src="http://code.jquery.com/jquery-1.5.js"></script> 
    <script> 
     function countChar(val) { 
     var len = val.value.length; 
     if (len >= 10000) { 
      val.value = val.value.substring(50, 10000); 
     } else { 
      $('#charNum').text(2000 - len); 
     } 
     }; 
    </script> 

然後把我排除在以下的div

<div id="charNum">Characters Left</div> 

最後添加以下到我的textarea

onkeyup="countChar(this)" 
0

你可以在你的代碼中使用它。它使用AngularJS。

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 
<div ng-app=""> 
 
    
 
<p>Input something in the input box:</p> 
 
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p> 
 
<h1>{{name.length}}</h1> 
 

 
</div> 
 

 
</body> 
 
</html>

+0

如果你不想使用AngularJS,你也可以使用'string.length'。它必須通過按鈕手動更新。 – 2017-08-22 18:52:34