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?
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?
Share Improve this question asked Dec 15, 2010 at 22:07 vittovitto 19.5k32 gold badges94 silver badges137 bronze badges 2- 1 Why do you have a timer? – Mark Commented Dec 15, 2010 at 22:11
- Because he should be using the keypress event :) – Ruan Mendes Commented Dec 15, 2010 at 22:28
5 Answers
Reset to default 5try using val() instead of text()
var text = $(input_text).val();
http://jsbin./epeva5/edit
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/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/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 :)
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).
$(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");
});