1

是否有可能有一个纯 Javascript 文本剩余计数器输出 a <span>or<p>标签而不是input字段中的值？我只能找到 Jquery 解决方案或在input字段中输出的解决方案。

4

3 回答 3

2

在网上看到很多人想要一个纯 Javascript 的剩余字符计数器，并且不预览输入框中的数字。昨晚我在搞乱 JSFiddle 并做了一些工作，并且能够让剩余的字符显示在其他标签中，例如<span>. 所以我只想和大家分享这个，希望它可以派上用场。

HTML：

<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100);" onKeyUp="textCounter('message','messagecount',100);"></textarea>
<span id="charsleft"></span>

Javascript：

<script>
    function textCounter(textarea, countdown, maxlimit) {
        var textareaid = document.getElementById(textarea);
        if (textareaid.value.length > maxlimit)
          textareaid.value = textareaid.value.substring(0, maxlimit);
        else
          document.getElementById('charsleft').innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
      }
</script>

<script type="text/javascript">
    textCounter('message','messagecount',100);
</script>

这里也是一个工作的JSFiddle

注意：如果有人想为脚本做出贡献以使其变得更好，请随时这样做。我不是 Javascript 方面的专家，所以它很可能是一个对用户更友好的解决方案。

亲切的问候

于 2012-07-01T15:35:46.707 回答
1

如果您将 jQuery 放在页面上，类似以下的内容也应该可以工作（为什么不这样做:)）：

$('#text-input-area').keyup(function(){
  $('#target-div').text(max_length-$(this).val().length + " characters remaining");
})
于 2012-07-01T15:46:47.047 回答
0

Lodder 的答案是完美的——除了我无法在同一页面上重复使用它。我已经调整了代码以传递跨度的名称，因此它可以在同一页面上重复使用。

<script>
 function textCounter(textarea, countdown, maxlimit, nameofspan) {
   var textareaid = document.getElementById(textarea);
    if (textareaid.value.length > maxlimit)
      textareaid.value = textareaid.value.substring(0, maxlimit);
    else
      document.getElementById(nameofspan).innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
  }
</script>


<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100,'messagespan');" onKeyUp="textCounter('message','messagecount',100,'messagespan');"></textarea>
<span id="messagespan"></span>

<script type="text/javascript">
    textCounter('message','messagecount',100,'messagespan');
</script>
于 2017-08-10T14:32:30.647 回答