├── README.markdown
├── jquery.caret.js
└── example.html
/README.markdown:
--------------------------------------------------------------------------------
1 | # jQuery Caret
2 |
3 | This is a very simple lightweight plugin to allow you to move the
4 | caret (or cursor) position in an <input /> or <textarea>
5 | element.
6 |
7 | By exposing three jQuery.fn methods you can easily move a a caret to
8 | any position you like:
9 |
10 | ## $.fn.caret()
11 |
12 | Use this method with no parameters to get the current position of the
13 | caret within the first element matched.
14 |
15 | ```javascript
16 | var position = $('input').caret();
17 | ```
18 |
19 | ## $.fn.caret( index , [ offset ] )
20 |
21 | This methods first parameter is the index of where you want to move
22 | the caret to. In order to move to an index, index must be an integer.
23 |
24 | Alternatively you can pass a string as an index and it will be used
25 | via .indexOf() the element's value to get an index to move to.
26 |
27 | The second parameter is to be used to move the caret to an offset of
28 | the index. When set to true, it will move the cursor after the string
29 | if a string was passed.
30 |
31 | ```javascript
32 | $('input').caret(10);
33 | ```
34 |
35 | ## $.fn.caretToEnd()
36 |
37 | This method moves the caret to the end of the content within your
38 | element, also for your convenience.
39 |
40 | ```javascript
41 | $('input').caretToEnd();
42 | ```
43 |
44 | ## Author
45 |
46 | Luke Morton
47 |
48 | ## License
49 |
50 | MIT
--------------------------------------------------------------------------------
/jquery.caret.js:
--------------------------------------------------------------------------------
1 | // Set caret position easily in jQuery
2 | // Written by and Copyright of Luke Morton, 2011
3 | // Licensed under MIT
4 | (function ($) {
5 | // Behind the scenes method deals with browser
6 | // idiosyncrasies and such
7 | $.caretTo = function (el, index) {
8 | if (el.createTextRange) {
9 | var range = el.createTextRange();
10 | range.move("character", index);
11 | range.select();
12 | } else if (el.selectionStart != null) {
13 | el.focus();
14 | el.setSelectionRange(index, index);
15 | }
16 | };
17 |
18 | // Another behind the scenes that collects the
19 | // current caret position for an element
20 |
21 | // TODO: Get working with Opera
22 | $.caretPos = function (el) {
23 | if ("selection" in document) {
24 | var range = el.createTextRange();
25 | try {
26 | range.setEndPoint("EndToStart", document.selection.createRange());
27 | } catch (e) {
28 | // Catch IE failure here, return 0 like
29 | // other browsers
30 | return 0;
31 | }
32 | return range.text.length;
33 | } else if (el.selectionStart != null) {
34 | return el.selectionStart;
35 | }
36 | };
37 |
38 | // The following methods are queued under fx for more
39 | // flexibility when combining with $.fn.delay() and
40 | // jQuery effects.
41 |
42 | // Set caret to a particular index
43 | $.fn.caret = function (index, offset) {
44 | if (typeof(index) === "undefined") {
45 | return $.caretPos(this.get(0));
46 | }
47 |
48 | return this.queue(function (next) {
49 | if (isNaN(index)) {
50 | var i = $(this).val().indexOf(index);
51 |
52 | if (offset === true) {
53 | i += index.length;
54 | } else if (typeof(offset) !== "undefined") {
55 | i += offset;
56 | }
57 |
58 | $.caretTo(this, i);
59 | } else {
60 | $.caretTo(this, index);
61 | }
62 |
63 | next();
64 | });
65 | };
66 |
67 | // Set caret to beginning of an element
68 | $.fn.caretToStart = function () {
69 | return this.caret(0);
70 | };
71 |
72 | // Set caret to the end of an element
73 | $.fn.caretToEnd = function () {
74 | return this.queue(function (next) {
75 | $.caretTo(this, $(this).val().length);
76 | next();
77 | });
78 | };
79 | }(jQuery));
--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | $.fn.caret() Examples
5 |
6 |
7 |
8 |