Get Cursor Position (In Characters) Within a Text Input Field

Get cursor position (in characters) within a text Input field

Easier update:

Use field.selectionStart example in this answer.

Thanks to @commonSenseCode for pointing this out.

Old answer:

Found this solution. Not jquery based but there is no problem to integrate it to jquery:

/*
** Returns the caret (cursor) position of the specified text field (oField).
** Return value range is 0-oField.value.length.
*/
function doGetCaretPosition (oField) {

  // Initialize
  var iCaretPos = 0;

  // IE Support
  if (document.selection) {

    // Set focus on the element
    oField.focus();

    // To get cursor position, get empty selection range
    var oSel = document.selection.createRange();

    // Move selection start to 0 position
    oSel.moveStart('character', -oField.value.length);

    // The caret position is selection length
    iCaretPos = oSel.text.length;
  }

  // Firefox support
  else if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection=='backward' ? oField.selectionStart : oField.selectionEnd;

  // Return results
  return iCaretPos;
}

Getting the cursor position in an input field using javascript

Use selectionEnd on mouseup event:

document.querySelector("input").addEventListener("mouseup", function(e){  console.log("pos:", this.selectionEnd);});

<input value="BT25 3___ ____ ____ ____">

How to get current cursor position when editing fabric.Textbox

I sort of figured it out. selectionStart and selectionEnd did the trick:

var activeObj = canvas.getActiveObject();
var caretPositionStart = activeObj.selectionStart;
var caretPositionEnd = activeObj.selectionEnd;
activeObj.enterEditing();
activeObj.insertChars("HI", null, caretPositionStart, caretPositionEnd);

How to find X and Y position of text caret/cursor

You can't get the exact coordinates of the text caret effortlessly, but this snippet will give you a rect object with the approximate coordinates of the window's current selection. You may have to also add/subtract use additional offsets of containing elements depending on your styling.

const selection = window.getSelection();
const range = selection.getRangeAt(0);
rect = range.getBoundingClientRect();

Get caret position in HTML input?

-> selectionStart

<!doctype html>
    
<html>
  <head>
    <meta charset = "utf-8">

    <script type = "text/javascript">
      window.addEventListener ("load", function () {
        var input = document.getElementsByTagName ("input");
        
        input[0].addEventListener ("keydown", function () {
          alert ("Caret position: " + this.selectionStart);
          
          // You can also set the caret: this.selectionStart = 2;
        });
      });
    </script>
    
    <title>Test</title>
  </head>

  <body>
    <input type = "text">
  </body>
</html>

How do you get the cursor position in a textarea?

If there is no selection, you can use the properties .selectionStart or .selectionEnd (with no selection they're equal).

var cursorPosition = $('#myTextarea').prop("selectionStart");

Note that this is not supported in older browsers, most notably IE8-. There you'll have to work with text ranges, but it's a complete frustration.

I believe there is a library somewhere which is dedicated to getting and setting selections/cursor positions in input elements, though. I can't recall its name, but there seem to be dozens on articles about this subject.

Get Cursor Position (In Characters) Within a Text Input Field