JavaScript
Article

6 jQuery Cursor Functions

By Sam Deering

jQuery code snippets to perform wonders with your mouse cursor! They can be used for setting and getting text cursor positions within input and textarea fields and selection ranges. Enjoy!

//Example jQuery get cursor position function call
$("input[name='username']").getCursorPosition();
jQuery.fn.getCursorPosition = function(){
	if(this.lengh == 0) return -1;
	return $(this).getSelectionStart();
}
//Example jQuery set cursor position function call
$("input[name='username']").setCursorPosition(5);
jQuery.fn.setCursorPosition = function(position){
	if(this.lengh == 0) return this;
	return $(this).setSelection(position, position);
}

//Example jQuery get text selection function call
$("input[name='username']").getSelection();
jQuery.fn.getSelection = function(){
	if(this.lengh == 0) return -1;
	var s = $(this).getSelectionStart();
	var e = $(this).getSelectionEnd();
	return this[0].value.substring(s,e);
}
//Example jQuery get text selection start function call
$("input[name='username']").getSelectionStart();
jQuery.fn.getSelectionStart = function(){
	if(this.lengh == 0) return -1;
	input = this[0];

	var pos = input.value.length;

	if (input.createTextRange) {
		var r = document.selection.createRange().duplicate();
		r.moveEnd('character', input.value.length);
		if (r.text == '') 
		pos = input.value.length;
		pos = input.value.lastIndexOf(r.text);
	} else if(typeof(input.selectionStart)!="undefined")
	pos = input.selectionStart;

	return pos;
}
//Example jQuery get text selection end function call
$("input[name='username']").getSelectionEnd();
jQuery.fn.getSelectionEnd = function(){
	if(this.lengh == 0) return -1;
	input = this[0];

	var pos = input.value.length;

	if (input.createTextRange) {
		var r = document.selection.createRange().duplicate();
		r.moveStart('character', -input.value.length);
		if (r.text == '') 
		pos = input.value.length;
		pos = input.value.lastIndexOf(r.text);
	} else if(typeof(input.selectionEnd)!="undefined")
	pos = input.selectionEnd;

	return pos;
}
//Example jQuery set text selection function call
$("input[name='username']").setSelection(4, 20);
jQuery.fn.setSelection = function(selectionStart, selectionEnd) {
	if(this.lengh == 0) return this;
	input = this[0];

	if (input.createTextRange) {
		var range = input.createTextRange();
		range.collapse(true);
		range.moveEnd('character', selectionEnd);
		range.moveStart('character', selectionStart);
		range.select();
	} else if (input.setSelectionRange) {
		input.focus();
		input.setSelectionRange(selectionStart, selectionEnd);
	}

	return this;
}
  • Pingback: 6 jQuery Cursor Functions « Big Engine Media()

  • http://www.dbydx.com H R Sharma

    Really this is an ultimate solution

  • bhavana

    this is awesom and works perfectly in mozilla but not in IE7 :(
    what changes do i need to do in order to make it work in IE7?

  • quandx2003

    Awesome, helps me alot. Thanks man

  • Frederik

    Unfortunately, there seem to be numerous errors in the IE < 9 case. First off, you have an "if" statement that effectively does nothing, since it's followed not by an "else", but rather by another statement that re-assigns the value of "pos" you just computed in the "if" case (this is in both getSelectionStart and getSelectionEnd). Secondly, the logic in the getSelectionEnd function is completely off: you don't want the lastIndexOf in this case, you want r.text.length. (And you don't need the "if" case at all.)

  • hans

    This was very usefull to me.
    I found one small typo in jQuery.fn.setSelection
    if(this.lengh == 0) return this;
    should be
    if(this.length == 0) return this;

  • rumana

    these functions are in which jquery plugin????

  • http://www.facebook.com/profile.php?id=788145510 Earl Cameron

    How can I get the value of the character before or after my cursor? or perhaps get the value two or three characters before the cursor?

  • Roman

    document.selection not suport in IE 11

  • mahi

    Hi There, Here is my situation, I have contenteditable div. I am doing copy and paste the text inside that div. When I do a paste I need to get and set the caret/cursor position. How do I do this? Can you please give me correct solution? Thanks Mahi

Recommended

Learn Coding Online
Learn Web Development

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

Get the latest in JavaScript, once a week, for free.