jquery keyup ignore non-changing characters

Question

I'm trying to get an event to fire whenever a contenteditable div is changed using keyup. Unfortunately it's also catching things like moving the caret with the arrow keys. I only want it to spot actual changes though.

I read this question, which seems similar, but the solution on there doesn't work for things like linebreaks. Ideas?

John Strickler · Answer 1 · 2011-05-26T18:01:45.763

2

One way would be to cache the length outside the handler then compare the current length of the textarea against your cached length. If they differ then you can assume the key that was pressed added content to the textarea. Hope this helps.

var textarea = $('textarea').get(0),
    length = $(textarea).val().length;

$(textarea).keyup(function() {
   if($(this).val().length != length) {

     //do something


     //cache new length
     length = $(this).val().length();
   }
});

edited May 26 '11 at 18:01

answered May 26 '11 at 17:55

John Strickler

25,151
4
52
68

$(this).length always equals 1. Should be $(this).text().length – Stephen Belanger May 26 '11 at 18:01
I totally messed that up - I forgot to add .val() I'm going to take a coffee break for that one. – John Strickler May 26 '11 at 18:02
Or val(), that works too. Don't worry, I've had plenty of those moments. :O – Stephen Belanger May 26 '11 at 18:03
Nevermind, val() doesn't work. Only text does...but length doesn't change in linebreaks for some reason. :S – Stephen Belanger May 26 '11 at 18:05
@Stephen have you checked the fiddle out yet? It's working there. – John Strickler May 26 '11 at 18:06
Yeah, that's odd. I'm using the same code and am getting zeros from val().length... – Stephen Belanger May 26 '11 at 18:09
Ugh...forgot I wasn't using a textarea, I'm using a contenteditable div. val() returns 0, while text() returns the length, but it doesn't see the line breaks. :( – Stephen Belanger May 26 '11 at 18:12
Dang you're using conenteditable div's? Way to be ballsy. I haven't ventured into them quite yet. – John Strickler May 26 '11 at 18:17
I ended up using this.innerHTML.length, which seems to be working. :) – Stephen Belanger May 26 '11 at 18:23
It would be a good idea to save the entire text, not only the length, because it is possible to select a single character and replace it so the length will not change. – s3v3n Sep 19 '13 at 14:56

jquery keyup ignore non-changing characters

1 Answers1