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