Skip to content

Instantly share code, notes, and snippets.

@lukemorton

lukemorton/README.markdown

Created June 4, 2011 13:32
Show Gist options
  • Save lukemorton/1007907 to your computer and use it in GitHub Desktop.
Save lukemorton/1007907 to your computer and use it in GitHub Desktop.
Download ZIP
Set caret position via jQuery
Raw
README.markdown

jQuery Caret

This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in an <input /> or <textarea> element.

By exposing three jQuery.fn methods you can easily move a a caret to any position you like:

$.fn.caretTo( index , [ offset ] )

This methods first parameter is the index of where you want to move the caret to. In order to move to an index, index must be an integer.

Alternatively you can pass a string as an index and it will be used via .indexOf() the element's value to get an index to move to. You could also use a RegExp object.

The second parameter is to be used to move the caret to an offset of the index. When set to true, it will move the cursor after the string if a string was passed.

$('input').caretTo(10);

// Move to position just before word
$('input').caretTo('hello');

// Move to position just after word
$('input').caretTo('hello', true);

// Move to offset from word's beginning
$('input').caretTo('hello', 6);

$.fn.caretToStart()

This is a shortcut for $.fn.caretTo(0) as a convenience to you.

$('textarea').caretToStart();

$.fn.caretToEnd()

This method moves the caret to the end of the content within your element, also for your convenience.

$('input').caretToEnd();

Author

Luke Morton

License

MIT

Raw
example.html
<!doctype html>
<html>
<head>
<title>$.fn.caretTo() Examples</title>
<meta charset="utf-8" />
</head>
<body>
<h1>$.fn.caretTo() Examples</h1>
<h2>&lt;input /&gt; Example</h2>
<p>
<input id="input-ex" value="A test string..." />
</p>
<p>
<button id="input-start">Jump to start</button>
<button id="input-end">Jump to end</button>
<br />
Index: <input id="input-index" value="5" />
<button id="input-ex-index">Jump to index</button>
<br />
toString: <input id="input-string" value="string" />
after: <input type="checkbox" id="input-string-after" />
<button id="input-ex-string">Jump to string</button>
</p>
<h2>&lt;textarea&gt; Example</h2>
<p>
<textarea id="textarea-ex">A test string...</textarea>
</p>
<p>
<button id="textarea-start">Jump to start</button>
<button id="textarea-end">Jump to end</button>
<br />
Index: <input id="textarea-index" value="5" />
<button id="textarea-ex-index">Jump to index</button>
<br />
toString: <input id="textarea-string" value="string" />
after: <input type="checkbox" id="textarea-string-after" />
<button id="textarea-ex-string">Jump to string</button>
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.caret.js"></script>
<script>
jQuery(function ($) {
var $inputExample = $('#input-ex'),
$textareaExample = $('#textarea-ex');
$('#input-start').click(function () {
$inputExample.caretToStart();
});
$('#input-end').click(function () {
$inputExample.caretToEnd();
});
$('#input-ex-index').click(function () {
$inputExample.caretTo($('#input-index').val() * 1);
});
$('#input-ex-string').click(function () {
$inputExample.caretTo(
$('#input-string').val(),
$('#input-string-after').is(':checked')
);
});
$('#textarea-start').click(function () {
$textareaExample.caretToStart();
});
$('#textarea-end').click(function () {
$textareaExample.caretToEnd();
});
$('#textarea-ex-index').click(function () {
$textareaExample.caretTo($('#textarea-index').val() * 1);
});
$('#textarea-ex-string').click(function () {
$textareaExample.caretTo(
$('#textarea-string').val(),
$('#textarea-string-after').is(':checked')
);
});
});
</script>
</body>
</html>
Raw
jquery.caret.js
// Set caret position easily in jQuery
// Written by and Copyright of Luke Morton, 2011
// Licensed under MIT
(function ($) {
// Behind the scenes method deals with browser
// idiosyncrasies and such
$.caretTo = function (el, index) {
if (el.createTextRange) {
var range = el.createTextRange();
range.move("character", index);
range.select();
} else if (el.selectionStart != null) {
el.focus();
el.setSelectionRange(index, index);
}
};
// The following methods are queued under fx for more
// flexibility when combining with $.fn.delay() and
// jQuery effects.
// Set caret to a particular index
$.fn.caretTo = function (index, offset) {
return this.queue(function (next) {
if (isNaN(index)) {
var i = $(this).val().indexOf(index);
if (offset === true) {
i += index.length;
} else if (offset) {
i += offset;
}
$.caretTo(this, i);
} else {
$.caretTo(this, index);
}
next();
});
};
// Set caret to beginning of an element
$.fn.caretToStart = function () {
return this.caretTo(0);
};
// Set caret to the end of an element
$.fn.caretToEnd = function () {
return this.queue(function (next) {
$.caretTo(this, $(this).val().length);
next();
});
};
}(jQuery));
@lukemorton
Copy link
Author

Moved to https://github.com/DrPheltRight/jquery-caret

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment