Get cursor position in characters within a text Input field

Question

How can I get the caret position from within an input field   I have found a few bits and pieces via Google  but nothing bullet proof   Basically something like a jQuery plugin would be ideal  so I could simply do      myinput   caretPosition

User · Answer

function            fn getCursorPosition   function             var input   this get 0           if   input  return     No  input  element found         if  document selection                   IE            input focus                      return  selectionStart  in input   input selectionStart       Math abs document selection createRange   moveStart  character   -input value length                 jQuery

User · Answer

Nice one  big thanks to Max   I ve wrapped the functionality in his answer into jQuery if anyone wants to use it    function            fn getCursorPosition   function             var input   this get 0           if   input  return     No  input  element found         if   selectionStart  in input                   Standard-compliant browsers             return input selectionStart            else if  document selection                   IE             input focus                var sel   document selection createRange                var selLen   document selection createRange   text length              sel moveStart  character   -input value length               return sel text length - selLen                     jQuery

User · Answer

There are a few good answers posted here  but I think you can simplify your code and skip the check for inputElement selectionStart support  it is not supported only on IE8 and earlier  see documentation  which represents less than 1  of the current browser usage   var input   document getElementById  myinput       or     myinput   0  var caretPos   input selectionStart      and if you want to know if there is a selection or not inside your input   if  input selectionStart    input selectionEnd        var selectionValue       input value substring input selectionStart  input selectionEnd

User · Answer

Perhaps you need a selected range in addition to cursor position  Here is a simple function  you don t even need jQuery   function caretPosition input        var start   input 0  selectionStart          end   input 0  selectionEnd          diff   end - start       if  start  gt   0  amp  amp  start    end               do cursor position actions  example          console log  Cursor Position      start         else if  start  gt   0               do ranged select actions  example          console log  Cursor Position      start     to     end          diff     selected chars               Let s say you wanna call it on an input whenever it changes or mouse moves cursor position  in this case we are using jQuery  on     For performance reasons  it may be a good idea to add setTimeout   or something like Underscores  debounce   if events are pouring in      input type  text     on  keyup mouseup mouseleave   function         caretPosition   this          Here is a fiddle if you wanna try it out  https   jsfiddle net Dhaupin 91189tq7

User · Answer

Got a very simple solution  Try the following code with verified result-   lt html gt   lt head gt   lt script gt      function f1 el        var val   el value      alert val slice 0  el selectionStart  length      lt  script gt   lt  head gt   lt body gt   lt input type text id t1 value abcd gt       lt button onclick  f1 document getElementById  t1     gt check position lt  button gt   lt  body gt   lt  html gt    I m giving you the fiddle demo

User · Answer

x000D   x000D  const inpT   document getElementById  text-box    x000D  const inpC   document getElementById  text-box-content    x000D     swch gets  inputs   x000D  var swch  x000D     swch  if corsur is active in inputs defaulte is false   x000D  var isSelect   false  x000D   x000D  var crnselect  x000D     on focus x000D  function setSwitch e    x000D    swch   e  x000D    isSelect   true  x000D    console log  set Switch      isSelect   x000D    x000D     on click ev x000D  function setEmoji     x000D    if  isSelect    x000D      console log  emoji added       x000D      swch value          x000D      swch setSelectionRange 2 2    x000D      isSelect   true  x000D      x000D   x000D    x000D     on not selected on input    x000D  function onout     x000D                          x000D    crnselect   inpC selectionStart  x000D     x000D       return input select not active after 200 ms   x000D    var len   swch value length  x000D    setTimeout      gt    x000D      len    swch value length   isSelect   false isSelect   true  x000D       200   x000D    x000D   lt h1 gt  Try it   lt  h1 gt  x000D       x000D     lt input type  text  onfocus    setSwitch this   onfocusout    onout    id  text-box  size  20  value  title  gt  x000D     lt input type  text  onfocus    setSwitch this    onfocusout    onout     id  text-box-content  size  20  value  content  gt  x000D   lt button onclick  setEmoji    gt emogi     lt  button gt  x000D   x000D   x000D

User · Answer

VERY EASY Updated answer Use selectionStart  it is compatible with all major browsers   x000D   x000D  document getElementById  foobar   addEventListener  keyup   e   gt      console log  Caret at     e target selectionStart     x000D   lt input id  foobar    gt  x000D   x000D   x000D   Update  This works only when no type is defined or type  quot text quot  or type  quot textarea quot  on the input

User · Answer

There is now a nice plugin for this  The Caret Plugin  Then you can get the position using     myTextBox   caret   or set it via     myTextBox   caret position

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to html