Detect when "cursor position inside input change" in jQuery?

Question

I'm using a plugin called jQuery TextRange to get the position of cursor inside a input (in my case, a textarea) and set the position too.

But now I have one thing that - I think - is harder to solve. I want know if in jQuery exist one event like "cursor position changed". What I mean is something like:

$('#my-input').on('cursorchanged', function(e){
    // My code goes here.
)};

I want to know when the cursor is moved inside the input/textarea, doesn't matter if by arrow keys or mouse click. I'm a jQuery newbie, but I think doesn't exist a event like this on jQuery, or exists?

Answer 1

No, there is no event like "cursor position changed".

But if you want to know if the cursor position changed, you can do something like this: tested with jquery 1.7, i tested in Ie8 and chrome

var last_position = 0;
$(document).ready(function () {
    $("#my_input").bind("keydown click focus", function() {
        console.log(cursor_changed(this));
    });
});

the console.log will return when the cursor have changed.

function cursor_changed(element) {
    var new_position = getCursorPosition(element);
    if (new_position !== last_position) {
        last_position = new_position;
        return true;
    }
        return false;
}

function getCursorPosition(element) {
    var el = $(element).get(0);
    var pos = 0;
    if ('selectionStart' in el) {
        pos = el.selectionStart;
    } else if ('selection' in document) {
        el.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    return pos;
}

Answer 2

I needed something like this myself, so based on @RenatoPrado solution I've created a jQuery extension (it's on npm - jquery-position-event).

To use it you can add standard event:

var textarea = $('textarea').on('position', function(e) {
   console.log(e.position);
});

and if you want the initial value you can use:

var textarea = $('textarea').on('position', function(e) {
   console.log(e.position);
}).trigger('position');

The event also have useful column and line properties.

Answer 3

In pure JS, also remembers caret position, please let me know if there're missing events.

const textarea = document.querySelector('textarea')

const storeCaretPos = () =>
  requestAnimationFrame(() =>
    localStorage.setItem('caretPos', textarea.selectionStart),
  )

textarea.oninput = textarea.onclick = textarea.oncontextmenu = storeCaretPos

textarea.onkeyup = ({ key }) => {
  if (['Arrow', 'Page', 'Home', 'End'].some(type => key.startsWith(type))) {
    storeCaretPos()
  }
}

Answer 4

in React we can add an onSelect event handler for the input tag. in js it will be onselectstart https://learn.javascript.ru/selection-range#sobytiya-pri-vydelenii.