How to Get Cursor Position in JavaScript

If you ever had a specific case where you had to retrieve the position of a caret (your cursor's position) inside an HTML input field, you can do so using the selectionStart property of an input's value.

<input type="text" id="input" value="123" />

<script>
  const input = document.getElementById('input');
  const position = input.selectionStart;
  
  // If the position of the cursor is at the very last character inside the input,
  // this will result in 3
  alert(position);
</script>

You can also outsource this functionality to the following one-line function, to reuse it across your application:

const getCaretPosition = e => e && e.selectionStart || -1;

getCaretPosition(document.getElementById('input')); // Returns 3
getCaretPosition(document.getElementById('email')); // Returns -1

Keep in mind that selectionStart can only be retrieved from the following list of input types:

• text
• password
• search
• tel
• url
• week
• month
• textarea

Therefore, in the example above, if you try to use it on an email type, it will always return -1.

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources

• HTMLInputElement properties