JavaScript
Article
By Sam Deering

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);
}

--ADVERTISEMENT--

//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;
}
Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account