Set mouse focus and move cursor to end of input using jQuery

jquery move cursor to end of contenteditable
angular move cursor to end
javascript set cursor position input
textarea set cursor position to end
react move cursor to end of input
jquery set cursor in input
how to set cursor focus on textbox in jquery
set focus at end of text in textbox jquery

This question has been asked in a few different formats but I can't get any of the answers to work in my scenario.

I am using jQuery to implement command history when user hits up/down arrows. When up arrow is hit, I replace the input value with previous command and set focus on the input field, but want the cursor always to be positioned at the end of the input string.

My code, as is:

$(document).keydown(function(e) {
  var key   = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  var input = self.shell.find('input.current:last');

  switch(key) {
    case 38: // up
      lastQuery = self.queries[self.historyCounter-1];
      self.historyCounter--;
      input.val(lastQuery).focus();
// and it continues on from there

How can I force the cursor to be placed at the end of 'input' after focus?

Looks like clearing the value after focusing and then resetting works.

input.focus();
var tmpStr = input.val();
input.val('');
input.val(tmpStr);

Move Cursor To End of Textarea or Input, Code to move the cursor to the end of the current text within in the jQuery.fn. references var $el = $(this), el = this; // Only focus if input isn't already if (! /set-​mouse-focus-and-move-cursor-to-end-of-input-using-jquery. Set mouse focus and move cursor to end of input using jQuery - set focus.js. Set mouse focus and move cursor to end of input using jQuery - set focus.js.

It looks a little odd, even silly, but this is working for me:

input.val(lastQuery);
input.focus().val(input.val());

Now, I'm not certain I've replicated your setup. I'm assuming input is an <input> element.

By re-setting the value (to itself) I think the cursor is getting put at the end of the input. Tested in Firefox 3 and MSIE7.

Move Cursor To End Of Input Or Textarea In jQuery, The function that moves the cursor of an input element to the end in jQuery is .​focus(). But sometimes, this won't work even if you replace it with  The function that moves the cursor of an input element to the end in jQuery is .focus(). But sometimes, this won’t work even if you replace it with [0].click(). It’ll maybe work on input fields properly, but won’t properly at all in text areas. Mostly it won’t work, if you are calling the .focus() function inside an event listener function.

Hope this help you:

var fieldInput = $('#fieldName');
var fldLength= fieldInput.val().length;
fieldInput.focus();
fieldInput[0].setSelectionRange(fldLength, fldLength);

Set mouse focus and move cursor to end of input using jQuery · GitHub, Set mouse focus and move cursor to end of input using jQuery. set focus.js. // From http://stackoverflow.com/a/26761864/2126472. 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].

Chris Coyier has a mini jQuery plugin for this which works perfectly well: http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

It uses setSelectionRange if supported, else has a solid fallback.

jQuery.fn.putCursorAtEnd = function() {
  return this.each(function() {
    $(this).focus()
    // 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)
      $(this).val($(this).val());
    }
    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;
  });
};

Then you can just do:

input.putCursorAtEnd();

jQuery/HTML5 Input Focus and Cursor Positions, jQuery Input Focus. Simply call the focus() function to set focus to an input. HTML5 Input Focus. Awesome feature provided by HTML5… jQuery function to set the cursor position to a specfic character position within an input field. selectRange = function(start, end) { return this.each(function() { if (this. jQuery/HTML5 Input Focus and Cursor Positions. Here are some code snippets and examples of how to use jQuery & HTML5 to set cursor Input Focus and Cursor Positions which are common actions with login forms and such. Comments, improvements and suggestions welcomed. Simply call the focus() function to set focus to an input.

What about in one single line...

$('#txtSample').focus().val($('#txtSample').val());

This line works for me.

Move cursor to the end of input or textarea, do it with jQuery and I thought it would be useful to have it somewhere, so here it is: //usage moveCursorToEnd($('input')); //function function  The above code could then be updated to use the equivalent getSelectionRange of the textarea when a user clicks a button, insert your code, then move the cursor to the end of the newly inserted code. By using the setSelectionRange or the createTextRange, it will allow you to set the mouse cursor position of a form element item such as a textarea, input box, etc…

Move Caret to End of Input or Textarea, How to move the cursor and caret to the end of INPUT and TEXTAREA HTML elements using JavaScript upon focus(). For the cursor to be move to the end, the input has to have focus first, then when the value is changed it will goto the end. If you set .value to the same, it won't change in chrome.

Move Cursor To End of Textarea or Input, This question has been asked in a few different formats but I can't get any of the answers to work in my scenario. I am using jQuery to  The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements ( <input>, <select>, etc.) and links ( <a href> ). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property.

Set caret position via jQuery, caret (or cursor) position in an <input /> or <textarea> element. By exposing three jQuery.fn methods you can easily move a a caret to This is how you “Set Focus on First Field with jQuery!” This is a simple snippet of code that sets focus with the mouse cursor in the first field of a form on a webpage as soon as it is loaded.

Comments
  • This is the only solution I've been able to find that works cross-browser. Kudos to you!
  • This works fine with FF and chrome but not in IE.. any one know how to solve this issue in IE ?
  • Note also you can chain the calls: var temp = input.focus().val(); input.val('').val(temp);
  • This can get even simpler: input.focus().val(input.val());
  • Doesn't seem to work with contenteditable elements for some reason, maybe as one has to use .html() rather than .val()
  • Yes, input is an <input> element. I tried this and it didn't work in FF3 or Safari 4
  • Any update on this? Worked for me. Update question or add an answer if you found a solution.
  • In FF15 this sets the cursor to the begin of the input field. Other than that its working fine. Do you have a solution for FF as well?
  • @JochenJung I have not looked at this since 2009 - it worked then with FF3 and jQuery. If you come up with a solution using current jQuery and FF15, please feel free to edit this post.
  • Works fine, I think this is a better solution than resetting the value, especially when there's some kind of model-view-binding.
  • This is the right answer, setting exactly what you want to set without kludging it.