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!

Recent Features

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    MooTools Documentation Search Favelet

    I'm going to share something with you that will blow your mind: I don't have the MooTools documentation memorized. I just don't. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use...

  • By
    Scrolling “Agree to Terms” Component with MooTools ScrollSpy

    Remember the good old days of Windows applications forcing you to scroll down to the bottom of the "terms and conditions" pane, theoretically in an effort ensure that you actually read them? You're saying "No David, don't do it." Too late -- I've done...

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.

  7. Daniel Lidström

    Does it also scroll the text left so that the cursor is visible? This is a problem on iOS when the text is longer than the width of the input element.

  8. Sándor Hatvani

    Thank you.

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