Move Cursor To End of Textarea or Input

Code to move the cursor to the end of the current text within in the input, rather than the default (highlighting the text).

Plugin format

jQuery.fn.putCursorAtEnd = function() {

  return this.each(function() {
    
    // Cache references
    var $el = $(this),
        el = this;

    // Only focus if input isn't already
    if (!$el.is(":focus")) {
     $el.focus();
    }

    // If this function exists... (IE 9+)
    if (el.setSelectionRange) {

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
      var len = $el.val().length * 2;
      
      // Timeout seems to be required for Blink
      setTimeout(function() {
        el.setSelectionRange(len, len);
      }, 1);
    
    } else {
      
      // As a fallback, replace the contents with itself
      // Doesn't work in Chrome, but Chrome supports setSelectionRange
      $el.val($el.val());
      
    }

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

  });

};

Usage

var searchInput = $("#search");

searchInput
  .putCursorAtEnd() // should be chainable
  .on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
  });

Demo

See the Pen Move Cursor To End of Textarea or Input by Chris Coyier (@chriscoyier) on CodePen.

Comments

  1. User Avatar
    David
    Permalink to comment#

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

  2. User Avatar
    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. User Avatar
    Vladimir Minkin
    Permalink to comment#

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

  4. User Avatar
    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. User Avatar
    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. User Avatar
    Andrey
    Permalink to comment#

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

  7. User Avatar
    Kushal Jayswal

    Is it possible using CSS only?

  8. User Avatar
    Kerry
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Nauris
    Permalink to comment#

    Not working on FF 40

  10. User Avatar
    Gianluigi
    Permalink to comment#

    Work with FF 41.0.2, Chrome 46.0.2490.71 m

    Thanks

  11. User Avatar
    Rumata
    Permalink to comment#

    Works with Tizen Wearable. Thank you!

  12. User Avatar
    Sohel Ahmed Mesaniya
    Permalink to comment#

    I thinks this link has pretty short and sweet answer (I have tried)
    http://stackoverflow.com/questions/1056359/set-mouse-focus-and-move-cursor-to-end-of-input-using-jquery

    I am eager to know what does above solution lacks.
    Thanks

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag