Keypress event : How to detect where the user is typing in the text box

Question

I'm in a situation where user I need to run some validations while user types and restrict him not to enter beyond a limit.

I'm using a key press event for this.

$(document).on('keypress', "#range", function (e) {});

Here is the example I've worked out.

Its working fine when the user is appending to the existing value, but when user changes it by prepending or editing in middle. So how can i detect the cursor position(index) while user is typing. At the same time how to know if the entire text in the textbox is selected or not.

To get the caret position, check this: http://flightschool.acylt.com/devnotes/caret-position-woes/ — Radonirina Maminiaina, May 27 '15 at 07:44
what are you exactly trying to accomplish...just limiting user from going beyond certain limit and it should work in all cases (copying,editing in the middle etc etc ). right? or is there anything else? — bhavya_w, May 27 '15 at 08:13
@Robert its the data limit not the length that is being limited — Strikers, May 27 '15 at 08:33

Mr_Green · Answer 1 · 2015-05-27T08:46:18.373

In your case, you should actually calculate the selection range using window.getSelection().

$(document).on('keypress', '#range', function (e) {
    var sel = document.getSelection();
    var keyCode = e.which || e.keyCode;
    var pressedChar = String.fromCharCode(keyCode);
    var start = sel.extentOffset;
    var end = sel.baseOffset;
    var str = this.innerHTML;

    // Then later magic!! 
    // Source: http://stackoverflow.com/a/1431113/1577396
    var curValue = str.substr(0, start) + pressedChar + str.substr(end);

    // other code
});

Working Fiddle

Keypress event : How to detect where the user is typing in the text box

1 Answers1