Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

Incredible Demos

  • By
    Degradable SELECT onChange

    Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function...

  • By
    Full Width Textareas

    Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily...

Discussion

  1. Clain Dsilva

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

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

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

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

  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!