Detect the future text during keypress event

Question

I have an editable div and I need to compare the text being entered into it with its content just before the latest key was typed.

eg : Previous text : Bhumi New text : Bhumik

Here are the K is being typed I should know that a content has changed. This detection needs to be done on the keyPress event .

However when i console.log the html of the div at each keypress then the final console.log is "Bhumi", ie. on the 'k' keypress the content still does not register K. This gets added on keyup only. Anyway that I can detect what the future content might be so that on each keypress I get what i will on keyup???

Also, I am not dealing with just one line but multiple lines.

EDIT ::: I do not need just the character typed. Suppose I have 10 lines and I can predict at each keypress the final content of a line that will be at keyup then on comparing the previous text to the future predicted text i can know on which line the user is typing currently.

you can get the types character from the `event.which` property — Arun P Johny, Apr 10 '13 at 06:50

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

You can read the pressed key from the event object.

var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
    //Do something
}

(see jQuery Event Keypress: Which key was pressed?)

edited May 23 '17 at 12:29

Community

1
1

answered Apr 10 '13 at 06:53

devsheeep

2,076
1
22
31

score 0 · Answer 2 · answered Apr 10 '13 at 06:54

0

Try this code..

$("#divId").keypress(function (e) {
            var keycode = e.keycode ? e.keycode : e.which;         
              }
        });

You can use keypress ,keydown or keyup.,For more info about Javascript keyevents click here

answered Apr 10 '13 at 06:54

Prabhakaran Parthipan

4,193
2
18
27

score 0 · Answer 3 · answered Apr 10 '13 at 07:02

0

You can try with multiple nested key events with .on() handler:

$('div').on('keypress keyup keydown', function(){
   console.log($(this).text());
});

answered Apr 10 '13 at 07:02

Jai

74,255
12
74
103

score 0 · Answer 4 · answered Jun 28 '21 at 16:56

You can generate the future value by taking the position where the new character will be inserted:

$('input').bind('keypress',function (){
    var value = e.target.value,
        idx = e.target.selectionStart,
        key = e.key;
        value =  value.slice(0, idx) + key + value.slice(idx + Math.abs(0));
    return yourfunction(value);
});

Detect the future text during keypress event

4 Answers4