Javascript Remaining Characters without input

问题

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.

回答1:

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

回答2:

something like the following should also work if you put jQuery on the page (and why wouldn't you :)):

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

回答3:

Lodder's answer is perfect - except that I could not re-use it on the same page. I have tweaked the code to pass the name of the span, so it can be re-used on the same page.

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

来源：https://stackoverflow.com/questions/11283244/javascript-remaining-characters-without-input

标签

javascript

html

counter