实时字符计数器
Posted
技术标签:
【中文标题】实时字符计数器【英文标题】：Live Character counter 【发布时间】：2018-01-24 23:14:39 【问题描述】：所以我试图在有人输入“textarea”并在输入时显示迄今为止输入的字符数。下面的代码是我试图为其设置计数器的字段。我想要通过工作故障排除的字符计数器。有什么想法可以做吗？
<tr>
<td >
<b>Troubleshooting</b><br />
</td>
<td >
<a href="javascript: validateHP()" onMouseover="buttonObject_HP.src='images/hp_1.png'" onMouseout ="buttonObject_HP.src='images/hp_0.png'">
<img name="buttonObject_HP" src="images/hp_0.png" border=0 /></a>
</td>
</tr>
</table>
<textarea class="normal" id="Reported" name="Reported" rows="12" cols="51" onchange="validateText();"></textarea>
【问题讨论】：
Count characters in textarea的可能重复 我试过了，但这不是我想要的。我试图让它通过故障排除（50 个字符）来显示它。那个有字数限制。我不想限制它我想显示你的金额。上升。 【参考方案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'。它必须通过一个按钮手动更新。以上是关于实时字符计数器的主要内容，如果未能解决你的问题，请参考以下文章