Move Caret to End of Input or Textarea

By  on  

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") {
        var range = el.createTextRange();

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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 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 intensity of elements. Let's have...

  • Detect DOM Node Insertions with JavaScript and CSS Animations

    I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.

Incredible Demos

  • Highlighter: A MooTools Search & Highlight Plugin

    Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...

  • NSFW Blocker Using MooTools and CSS

    One of my guilty pleasures is scoping out the latest celebrity gossip from,, and Unfortunately, these sites occasionally post NSFW pictures which makes checking these sites on lunch a huge gamble -- a trip to HR's office could be just a click away. Since...


  1. Brilliant piece of code..!! As always, I really enjoy your nifty scripts and this one made my day.
    Many Thanks David.

  2. 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) {
      var s = el.value;
      el.value = '';
      el.value = s;
    • Thanks for commenting Chris! That will work but occasionally you see the “content flash” which is less than ideal.

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

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

  5. Gergő Gyula

    Great snippet, just what I needed, thank you!!!

  6. Josef

    I don’t believe that this will work in Chrome on type=number inputs.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!