CODEWITHSUNDEEP
javascriptjquerykeyboardkeypress
Bhumi Singhal
Bhumi Singhal

Reputation: 8307

Detect the future text during keypress event

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.

Upvotes: 0

Views: 1144

Answers (5)

Luis Gojon
Luis Gojon

Reputation: 1

My improved answer:

function getNewValue(evt) {
    var start = evt.target.selectionStart,
    end = evt.target.selectionEnd,
    charCode = (evt.which) ? evt.which : evt.keyCode,
    original = $(evt.target).val(),
    char = String.fromCharCode(charCode),
    newer = "";

    newer += original.slice(0, start) + char + original.slice(end);

    console.log("newer: " + newer);
}

My original answer:

I had a similar problem where I needed to obtain the correct value that a user's keypress would generate to evaluate it properly, so I learned from other answers here and wrote my own.

function getNewValue(evt) {
    var start = evt.target.selectionStart,
        end = evt.target.selectionEnd,
        charCode = (evt.which) ? evt.which : evt.keyCode,
        original = $(evt.target).val(),
        char = String.fromCharCode(charCode),
        newer = "", inserted = false, single = 0;
    
    if (start == end) single = 1;

    if (original.length > 0) {
        for (var i = 0; i < original.length; i++) {
            if (!inserted) {
                if (single && i == start) {
                    newer += char + original[i];
                    inserted = true;
                } else if (!single && i == start) {
                    newer += char; inserted = true;
                } else
                    newer += original[i];
            } else {
                if (single)
                    newer += original[i];
                else if (i < start || i >= end)
                    newer += original[i];
            }
        }
        if (!inserted) newer += char;
    } else newer += char;

    console.log("newer: " + newer);
    // You can add conditions here to evaluate "newer".
    // Use "return false" to reject "newer".
}

I use this function by adding the following to the HTML element that I want to evaluate:

onkeypress="return getNewValue(event)"

I haven't had any problems with it, but I'll update this answer if I find a better alternative or notice any issues. Edit: My function doesn't seem optimal for use cases with large texts.

Upvotes: 0

MxGutierrez
MxGutierrez

Reputation: 31

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);
});

Upvotes: 0

Jai
Jai

Reputation: 74738

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

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

Upvotes: 0

Prabhakaran Parthipan
Prabhakaran Parthipan

Reputation: 4273

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

Upvotes: 0

devsheeep
devsheeep

Reputation: 2116

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?)

Upvotes: 0

Related Questions