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

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?

86 thoughts on “Detect when "cursor position inside input change" in jQuery?”

  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;
    }
    
    Reply
  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.

    Reply
  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()
      }
    }
    
    Reply

Leave a Comment