没有输入的Javascript剩余字符 [英] Javascript Remaining Characters without input

问题描述

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


解决方案

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



 < textarea id =messagecols =20rows =5name =messageonKeyDown =textCounter（'message'，'messagecount ，100）;的onkeyup =textCounter（消息， messagecount，100）;>< / textarea的> 
< span id =charsleft>< / span> 
  

Javascript：


 <脚本> 
函数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的专家，所以它很可能是一个更加用户友好的解决方案。

亲切的问候

Is it possible to have a pure Javascript text remaining counter that outputs the value in a <span> or <p> tag rather than an input field? I can only find Jquery solutions or ones that output in input fields.

解决方案

Have seen over the net that a lot of people are wanting a remaining characters counter that is pure Javascript and doesn't preview the number in an input box. I was messing around with JSFiddle lastnight and did a little work around and was able to get the remaining characters to show in other tags such as <span>. So I would just like to share this with everyone and hope it might come in handy.

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>

Here is also a working JSFiddle

Note: Should anyone want to contribute to the script to make it better, please feel free to do so. I am not an expert in Javascript so it most likely a more user friendly solution.

Kind Regards

这篇关于没有输入的Javascript剩余字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！