/ Gists / Caret
On gists

Caret

•
jQuery

jquery.caret.js Raw # 

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

example.html Raw # 

<!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>

README.markdown Raw # 

# jQuery Caret

This is a very simple lightweight plugin to allow you to move the
caret (or cursor) position in an &lt;input /&gt; or &lt;textarea&gt;
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