jQuery: input text remaining chars counter

Question

I'm trying to write a simple remaining chars counter for my backoffice input texts with jQuery but it doesn't work:

<script type="text/javascript"> $(document).ready(function(){ function text_counter (input_text, target) { var max = $(input_text).attr("maxlength"); $(input_text).keydown (function () { var timer = setTimeout (function () { var text = $(input_text).text(); var current = text.length; $(target).text(current + "/" + max); }, 1); }); } text_counter ("#description", "#description_counter"); }); </script> <input id="description" type="text" maxlength="250" value="Default text"> <span id="description_counter"></span>

If I start to write inside the input, the span element change in 12/250 and freeze here (12 == "Default text".length).

Where I'm wrong?

Why do you have a timer?

Mark
– Mark

2010-12-15 22:11:34 +00:00
Commented Dec 15, 2010 at 22:11 — Mark
– Mark, Commented Dec 15, 2010 at 22:11
Because he should be using the keypress event :)

Ruan Mendes
– Ruan Mendes

2010-12-15 22:28:50 +00:00
Commented Dec 15, 2010 at 22:28 — Ruan Mendes
– Ruan Mendes, Commented Dec 15, 2010 at 22:28

The Scrum Meister · Accepted Answer · 2010-12-15 22:10:13Z

5

try using val() instead of text()

var text = $(input_text).val();

answered Dec 15, 2010 at 22:10

The Scrum Meister

30.2k8 gold badges69 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark · Accepted Answer · 2010-12-15 22:13:38Z

2

http://jsbin.com/epeva5/edit

answered Dec 15, 2010 at 22:13

Mark

33.8k34 gold badges109 silver badges139 bronze badges

Comments

Jonathon Bolster · Accepted Answer · 2010-12-15 23:13:54Z

This is my solution for you:

function text_counter(input_text, target) { var max = input_text.attr("maxlength"); input_text.keyup(function() { target.text(this.value.length + "/" + max) }); } text_counter($("#description"), $("#description_counter"));

Example: http://jsfiddle.net/jonathon/dkWHp/

A couple of differences. Firstly, I use the keyup event. Otherwise you're running the code before the character is removed (maybe that's why you're using the setTimeout) - it also gets fired on a backspace. I also pass the jQuery objects into the text_counter function. This was you just create the single jQuery selector (instead of the multiple $(input_text) calls). In the keyup handler, I just call this.value.length since this is a HTML input element and I don't need to bother jQuery for this.

For good measure, here's another implementation of text_counter:

function text_counter(input_text, target) { var max = input_text.attr("maxlength"); setInterval(function(){ target.text(input_text.val().length + "/" + max) }, 100); }

Example: http://jsfiddle.net/jonathon/vZHGU/

Instead of handling the key events, I just set up a timer which sets the text of target every 100ms. Why show this? When you handle a key event, it will only fire once. The second piece of code I gave will continually poll the length of the text box so that the span gets updated even if the backspace button is held down.

I don't like the second solution because it creates unnecessary work (the setInterval will run regardless of the user interaction with the box) but I do show it because you could play with both solutions. For example, you could invoke 5 seconds of polling on a keypress or something to get the best of both worlds :)

Mimo · Accepted Answer · 2013-04-07 22:44:54Z

I had a similar issue and I wrote a jQuery / BootStrap plugin for that. You can use it as:

$('input.className').maxlength({ threshold: 10, warningClass: "label label-success", limitReachedClass: "label label-important", separator: ' of ', preText: 'You have ', postText: ' chars remaining.' });

You can get it from github: http://mimo84.github.io/bootstrap-maxlength/ (you'll find some examples as well).

Ruan Mendes · Accepted Answer · 2010-12-15 22:39:33Z

$(function(){ function text_counter (input_text, target) { var $input = $(input_text); var $target = $(target); var max = $input.attr("maxlength"); var defaultText = $input.val(); $(input_text).keypress(function () { var val = $input.val(); var len = val.length; if (val == defaultText) { len == 0; } $target.text(len + "/" + max); }); } text_counter ("#description", "#description_counter"); });

Collectives™ on Stack Overflow

jQuery: input text remaining chars counter

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related