Caracteres restantes de Javascript sin entrada

Is it possible to have a pure Javascript text remaining counter that outputs the value in a <span> or <p> etiqueta en lugar de una input field? I can only find Jquery solutions or ones that output in input campos.

preguntado el 01 de julio de 12 a las 16:07

Thanks for sharing, but this isn't the right form to present it on Stack Overflow. You should ask a 'how do I' question and you can answer it yourself if you want to share your own solution -

Re Peter's comment, more reading and the official position: blog.stackoverflow.com/2011/07/… -

You would probably want to pass the id of the charsleft span as a parameter to the function as well, otherwise it won't be possible to use it more than one time on each page. -

Its not a question. You are allowed to ask only questions here. Yes, you can answer your own question. -

have changed the format to make it a question and answered it below. thanks for the advice. -

3 Respuestas

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.

Saludos cordiales

Respondido 01 Jul 12, 17:07

<canvas> is what I would suggest! - 11684

Estas haciendo textareaid global. use var textareaid. Also I think, when max limit is reached , instead of substring each time, we can return false on onKeyDown evento - Jashwant

@Jashwant: Have changed textareaid a var textareaid however not sure how to go about your second suggestion. If you would be able to edit my JSFiddle, that would be much appreciated - Lodder

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");
})

Respondido 01 Jul 12, 16:07

The method I used was pure Javascript as I don't see the point in loading a whole library just for a small function. - Lodder

@Lodder aw come on, you'll use it! :) - andbdrew

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>

Respondido 10 ago 17, 15:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.