Counting characters in IE sets cursor to end of text.

Question

Hello everybody,

I have a simple textarea with id:"describe_short". and the user should be able to insert a limited count of chars. so i wrote this little function:

var max_char = $('#max_chars > span');    
$('#describe_short').bind('keyup', function(){
                var char_count = $(this).val().length;
                $(this).val($(this).val().substr(0, self.short_maximum));
                var chars_left = self.short_maximum - char_count
                if(chars_left < 0) chars_left = 0;
                max_char.text(chars_left);
            });

*where in max_char the number of chars left is displayed.*

in ff, chrome it workes like a charm but the IE(8) behaves different. i can't set the cursor to an other position than the end-pos of the whole text.

what can i do to avoid this?

Answer 1

I think the problem is that you're setting the value of $(this) to its own short_maximum on every keyup, which may be making IE angry.

It would be better to only change the val if its length has ALREADY exceeded short_maximum. Personally, I'd just throw in:

if ($(this).val().length > self.short_maximum) {
 $(this).val($(this).val().substr(0, self.short_maximum));
}

Also, just a preference thing, but you could also change this:

if(chars_left < 0) chars_left = 0;

to this:

chars_left=Math.max(chars_left,0);