The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Move Cursor To End of Textarea or Input

Last updated on:
jQuery.fn.putCursorAtEnd = function() {

  return this.each(function() {


    // If this function exists...
    if (this.setSelectionRange) {
      // ... then use it (Doesn't work in IE)

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
      var len = $(this).val().length * 2;

      this.setSelectionRange(len, len);
    } else {
    // ... otherwise replace the contents with itself
    // (Doesn't work in Google Chrome)


    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;


Check out this Pen!

Reference URL


  1. David
    Permalink to comment#

    I think I’m missing something since it’s behaving exactly like any other input. What’s happening?

  2. Grant
    Permalink to comment#

    Useful for when you have an input or textarea with pre-populated content you wish to preserve. Calling focus will select the existing content, using this plugin will put the cursor at the end, allowing the user to begin typing right away while preserving the content.

  3. Vladimir Minkin
    Permalink to comment#

    Did you test this on mobile web app made with cordova?

  4. koew
    Permalink to comment#

    Thank you for this great snippet!
    I had some trouble with appended input elements that could contain a value, since.focus() selects any pre-determined value. This snippet saved me from a lot of extra work.

  5. Hein Haraldson Berg
    Permalink to comment#

    Would it be an idea to cache $(this)?

    Also: Why call it cursor, when what we’re really manipulating is the caret?

  6. Andrey
    Permalink to comment#

    This seems not to work on FF. (I have FF27)

  7. Kushal Jayswal

    Is it possible using CSS only?

  8. Kerry
    Permalink to comment#

    I’m struggling to implement this behavior on focus of a <textarea>. Has anyone gotten that to work?

    • Aaron

      Those having trouble with this code might check what other events are bubbling through the DOM. For example, if you trying to fire the code in the example from an up-arrow keypress, the code will run properly [and move the cursor to the end of the input field], but then the up arrow keypress will bubble up to the browser [which directs it to move the cursor to the start of the input field].

      Test if this is your problem by calling preventDefault() inside the event where you trigger the example code.

      Otherwise, as you can see from the example CodePen, this code works on Chrome/Firefox/Safari/IE ‘s most widely used versions (as of May 2015).

  9. Nauris
    Permalink to comment#

    Not working on FF 40

  10. Gianluigi
    Permalink to comment#

    Work with FF 41.0.2, Chrome 46.0.2490.71 m


  11. Rumata
    Permalink to comment#

    Works with Tizen Wearable. Thank you!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed