实时字符计数器答案

【问题标题】：Live Character counter实时字符计数器
【发布时间】：2018-01-24 23:14:39
【问题描述】：

所以我试图在有人输入“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>

【问题讨论】：

Count characters in textarea的可能重复
我试过了，但这不是我想要的。我试图让它通过故障排除（50 个字符）来显示它。那个有字数限制。我不想限制它我想显示你的金额。上升。

标签： html character counter

【解决方案1】：

我做了以下事情来得到我想要的。

将以下内容放在头部

<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放在我的Troubleshooting下

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

最后我将以下内容添加到我的文本区域

onkeyup="countChar(this)"

【讨论】：

【解决方案2】：

您可以在代码中使用它。它使用 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>

【讨论】：

如果您不想使用 AngularJS，也可以使用 'string.length'。它必须通过一个按钮手动更新。