O'Reilly

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") {
        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!

Treehouse Learning

Recent Features

  • 5 More HTML5 APIs You Didnât Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • 5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

  • Build a Calendar Using PHP, XHTML, and CSS

    One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I've taken some time to completely...

Discussion

  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) {
      el.focus();
      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!