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

CSS 3D Folding Animation
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS;...
CSS Filters
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color...
CSS Gradients
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet...

Incredible Demos

Cross Browser CSS Box Shadows
Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them. For someone with no design talent, a.k.a me, the need to...
CSS Background Animations
Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks....
MooTools TwitterGitter Plugin
Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the...

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.