Question

是否可以使用纯Javascript文本剩余计数器来输出<span>或<p>标记而不是input字段中的值？我只能找到Jquery解决方案或在input字段中输出的解决方案。

Answer 1

在网上看到很多人都想要一个纯粹的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的专家，所以它很可能是一个更加用户友好的解决方案。

亲切的问候

Answer 2

如果你把jQuery放在页面上（以及你为什么不这样做），

如下所示也应该有效：）

$('#text-input-area').keyup(function(){
  $('#target-div').text(max_length-$(this).val().length + " characters remaining");
})

Answer 3

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

<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>

没有输入的Javascript剩余字符

3 个答案: