Move Caret to End of Input or Textarea

By David Walsh on October 31, 2012

One of the annoying parts of using the focus method of HTML elements is that they don't move the cursor to the end of INPUT or TEXTAREA elements if they already have content in them. That's probably the last thing a user would want. I was browsing through Stack Overflow when I found this gem: a function that moves the cursor to the end of an INPUT or TEXTAREA on command!

function moveCursorToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

Simply pass the element to the function above and you'll see the caret move to the end of the element! Caret management in the browser sucks, but this function makes it incredibly easy. Enjoy!

Recent Features

9 More Mind-Blowing WebGL Demos
With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities. I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL...
CSS @supports
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each...
Convert XML to JSON with JavaScript
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native...

Incredible Demos

9 More Mind-Blowing WebGL Demos
With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities. I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL...
CSS Sprites
The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are: Fewer images for...
MooTools Text Flipping
There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them. One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found...

Discussion

Clain Dsilva
Brilliant piece of code..!! As always, I really enjoy your nifty scripts and this one made my day.
Many Thanks David.
Chris Wainwright
Hello! Did you know you can also do a slight variation on the input.value = input.value; hack to make it work cross browser, something like:
```
function focusAtEnd(el) {
  el.focus();
  var s = el.value;
  el.value = '';
  el.value = s;
}
```

David Walsh
Thanks for commenting Chris! That will work but occasionally you see the “content flash” which is less than ideal.

Chris Wainwright
Agreed. Plus, I can’t imagine it’s very future proof relying on the behavioiur of the caret when setting the value. Your method is definitely the right way to do it.
Adrien Mas
What if the user had clicked a very precise word to edit it ? Wont it be annoying to have the cursor at the end of the input when you clicked the beginning ? Maybe this method should only be used when the user is accessing a field with the tab key.