没有输入的Javascript剩余字符答案

【问题标题】：Javascript Remaining Characters without input没有输入的Javascript剩余字符
【发布时间】：2012-07-01 15:26:31
【问题描述】：

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

【问题讨论】：

感谢分享，但这不是在 Stack Overflow 上展示它的正确形式。你应该问一个“我该怎么做”的问题，如果你想分享自己的解决方案，你可以自己回答
回复彼得的评论，更多阅读和官方立场：blog.stackoverflow.com/2011/07/…
您可能还希望将charsleft span 的 id 作为参数传递给函数，否则将无法在每个页面上多次使用它。
这不是问题。您只能在这里提问。是的，您可以回答自己的问题。
已更改格式以使其成为问题并在下面回答。谢谢你的建议。

【解决方案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 方面的专家，所以它很可能是一个对用户更友好的解决方案。

亲切的问候

【讨论】：

<canvas> 是我的建议！
您正在使textareaid 成为全球性的。使用var textareaid。另外我认为，当达到最大限制时，我们可以在 onKeyDown 事件上 return false 而不是每次都使用子字符串
@Jashwant：已将textareaid 更改为var textareaid，但不确定如何处理您的第二个建议。如果您能够编辑我的 JSFiddle，将不胜感激

【解决方案2】：

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

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

【讨论】：

我使用的方法是纯 Javascript，因为我没有看到仅为一个小函数加载整个库的意义。
@Lodder 来吧，你会用的！ :)

【解决方案3】：

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>

【讨论】：