Skip to content

Instantly share code, notes, and snippets.

@ControlledChaos
Last active October 2, 2016 19:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ControlledChaos/210c669650b787651809e4e0a97dd78b to your computer and use it in GitHub Desktop.
Save ControlledChaos/210c669650b787651809e4e0a97dd78b to your computer and use it in GitHub Desktop.
Move the cursor to the end of the current text within in an input or textarea, rather than the default (highlighting the text).

Put Cursor at the End of Input Text

jQuery Plugin

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;
});
};
var searchInput = $("#search");
searchInput
.putCursorAtEnd() // should be chainable
.on("focus", function() { // could be on any event
searchInput.putCursorAtEnd()
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment