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.

cursor-focus

jQuery Input Focus

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

//set focus on input
$('input[name=firstName]').focus();

jsfiddle.net/z9Ldt/

HTML5 Input Focus

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

//AUTO INPUT FOCUS
<input type="text" name="myInput" autofocus />

jsfiddle.net/89PHL/

jQuery Set Cursor Position

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

//SET CURSOR POSITION
$.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.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

Example Usage

Sets cursor position after first character.

$('#username').setCursorPosition(1);

jsfiddle.net/tAZSs/

jQuery Set Cursor Position

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

//SELECT TEXT RANGE
$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Example Usage

Selects the first 5 characters in the input.

$('#username').selectRange(0,5);

jsfiddle.net/yMUx5/

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
  • Pingback: Tweet parade (no.08 Feb 2013) | gonzoblog()

  • Serdar Kuzucu

    Thank you! Useful topic and codes :)

  • Valerij

    Nice & Easy – that I was searched for

  • Yasin

    Thank you, it’s working great.

  • Beach

    This article is useful. I do have one question though.

    Why in the selectRange function is this.each() returned but in the setCursorPosition function this is returned? It is my understanding that returning this.each() allows for function chaining…Was function chaining for setCursorPosition undesired, or was there another reason/benefit to returning this instead of this.each()?

    • Stavros Ioannidis

      “this” is the jQuery object upon which we “work”. For chaining reasons “this.each()” returns the jQuery object upon which we “work”… So they are the same thing. you can see for yourself by doing console.log(this == this.each(function( ){ }))

  • freddy

    Cool i prefer using HTML5, is taht all browser support HTML5 ?

  • Dan

    Thanks I used it to put the cursor at end of string so the end part of string will display in textbox when it has been set by jquery.val method.

  • Diego Cosacow

    Why putting the caret on a specific place doesn’t work with type=”email” on chrome? do you know some way to make it work?

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!