Skip to main content

jQuery/HTML5 Input Focus and Cursor Positions

By Sam Deering



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.


jQuery Input Focus

Simply call the focus() function to set focus to an input.

//set focus on input

HTML5 Input Focus

Awesome feature provided by HTML5… Couldn’t find this on but I’ve tested it’s working in Chrome & Firefox but not in IE9 or below.

<input type="text" name="myInput" autofocus />

jQuery Set Cursor Position

jQuery function to set the cursor position to a specfic character position within an input field.

$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.moveEnd('character', pos);
      range.moveStart('character', pos);;
  return this;

Example Usage

Sets cursor position after first character.


jQuery Set Cursor Position

jQuery function to auto select text (specific number of characters) within an input field.

$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.moveEnd('character', end);
            range.moveStart('character', start);

Example Usage

Selects the first 5 characters in the input.


Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Integromat Tower Ad