Use JavaScript to place cursor at end of text in text input element

Dealing with browser quirks

Sadly, not all browsers are made equal and require some extra handling. In a few browsers, the focus event ambitiously fires before it should, leading to chaos in the cursor world. Thankfully, we can alleviate this by wrapping the setSelectionRange call within a setTimeout with a delay so small, even a fruit fly would miss it (0 ms). This deferral makes sure that our operation waits patiently until the event loop queue is clear, essentially cutting in line.

function placeCursorAtEnd(el) {
  let len = el.value.length;
  el.focus();
  setTimeout(() => { // "Please wait your turn, setSelectionRange!"
    el.setSelectionRange(len, len);
  }, 0);
}


Support for older browsers

We're looking at you, Internet Explorer. If you're dealing with the cantankerous Internet Explorer or older versions of Opera that, for reasons known only to itself, doubles the input value's length, you might need some fallback magic using createTextRange.

function placeCursorAtEnd(el) {
  let len = el.value.length;
  el.focus();
  if (el.createTextRange) {
    var range = el.createTextRange();
    range.collapse(true); // "We're going down!"
    range.moveEnd('character', len);
    range.moveStart('character', len);
    range.select(); // "Gotcha!"
  } else if (el.setSelectionRange) {
    setTimeout(() => { // "Back in line, setSelectionRange!"
      el.setSelectionRange(len, len);
    }, 0);
  }
}


Catering for scrolling in text areas

Scrollable text areas require an extra sprinkling of attention. You should also take care of the scrollTop property to ensure that if the content overflows into the twilight zone (I mean, beyond the visible area), we graciously scroll to the bottom.

function placeCursorAtEnd(el) {
  let len = el.value.length;
  el.focus();
  el.scrollTop = el.scrollHeight; // "To infinity and beyond!"
  setTimeout(() => {
    el.setSelectionRange(len, len);
  }, 0);
}


Plot twists in Chrome and Safari

Trust Chrome and Safari to serve up a plot twist. In these browsers, mystifyingly, the focus event doesn't quite... focus. Substituting focus with mouseup can minimize the drama as it caters for the user clicking within the text field.

document.getElementById('yourTextInputId').addEventListener('mouseup', function() {
  this.selectionStart = this.selectionEnd = this.value.length; // "There's a new Sheriff in town!"
});


The jQuery short-cut

If you prefer jQuery, you can achieve the same result, but with slightly fewer characters:

$('#yourTextInputId').on('mouseup', function() {
  $(this).focus();
  const len = $(this).val().length;
  $(this).setSelectionRange(len, len); // "Benched again, focus()!"
});


Advanced use cases and considerations

Working with dynamic content

For times when you're dabbling with dynamic content (you know, the content that pops up unexpectedly like in AJAX calls or modal windows), remember to only try to put focus on an input text field after its parent content is well and truly loaded and visible.

// Example using jQuery to focus after a modal is shown
$('#myModal').on('shown.bs.modal', function() {
  placeCursorAtEnd($('#dynamicInputId').get(0)); // "A new challenger approaches!"
});


Prioritizing user experience

A superior user experience is usually the one where the smallest details were paid attention to. An automatic cursor placement at the end of an input field whenever it gains focus can be a pleasant surprise for your users. This can be particularly useful in single-page applications where form elements may persist between view changes.

Code reusability

There's hardly a better thrill than writing a piece of code just once, but using it all over. You should pay your deeds forward by creating reusable directives or components in Angular or React that will carry this functionality, thereby gifting this convenience to any component of your project that might need it.