Get caret position in HTML input?

javascript html caret
user345824 picture user345824 · Feb 8, 2011 · Viewed 92.9k times · Source

How do I get the index of the text caret in an input?

Answer

Caio picture Caio · Feb 8, 2011

-> 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>

Related questions

contenteditable, set caret at the end of the text (cross-browser)

output in Chrome: <div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;"> hey <div>what's up?</div> <div> <button id="insert_caret"></button> I …

Read More
Set caret position at a specific position in contenteditable div

SEE BEFORE MARKING DUPLICATE/DOWNVOTING The contenteditable div will not have child elements I do not want to set the position at the end of the div I do not want a cross-browser solution, only Chrome support required Only vanilla …

Read More
Set the caret position always to end in contenteditable div

In my project, I am trying to set the caret position always to the end of the text. I know this is default behaviour but when we add some text dynamically, then the caret position changes to starting point in …

Read More