Extends the Element Type to include methods useful in managing inputs.

• Online Tutorial/Demo

Uses String:tidy to clean up common special characters with their ASCII counterparts (smart quotes, elipse characters, stuff from MS Word, etc.).

$('myInput').tidy();

• (element) This Element.

Returns the text of an input within a range.

$('myInput').getTextInRange(start, end);

1. start - (number) beginning select position
2. end - (number) end position

• (string) the text in the specified range

• If the range specified is out of bounds (for instance, if the text is "123" and you query for the range 2-10) the text that is found within the bounds is returned. If no text falls within the bounds, an empty string is returned.

Get the text selected in an input, returns a range (see Element:getTextInRange).

$('myInput').getSelectedText();

• (string) The text that is selected

• If no text is selected, an empty string is returned.

Returns the index of start of the selected text.

$('myInput').getSelectionStart();

• (number) The numerical index of the start of the selection.

Returns the index of end of the selected text.

$('myInput').getSelectionEnd();

• (number) The numerical index of the end of the selection.

• If there is no selection, this value will be equal to Element:getSelectionStart

Returns the range of what is selected within the element.

$('myInput').getSelectedRange();

• (object) start and end values (each an number).

{start: 2, end: 12}

Sets the caret at the given position.

$('myInput').setCaretPosition(pos);

1. pos - (number) the location to place the caret OR "end" to place it at the end.

• (element) This Element.

$('myInput').setCaretPosition(3);
$('myInput').setCaretPosition("end");

Returns the caret position.

$('myInput').getCaretPosition();

• (number) The caret position.

Selects text within a given range.

$('myInput').selectRange(start, end);

1. start - (number) starting number
2. end - (number) ending number

• (element) This Element.

$('myInput').selectRange(2, 4);

<input id="test" value="012345" />
$('test').selectRange(2, 4); //selects "23"

Inserts a value at the cursor location; if text is selected, it replaces this text.

$('myInput').insertAtCursor(value[, selectText]);

1. value - (string) value to insert.
2. selectText - (boolean) selects the text after it's been inserted

• (element) This Element.

$('myInput').insertAtCursor("<br />");
$('myInput').insertAtCursor("type something here", true);

Inserts two strings around the selected text.

$('myInput').insertAroundCursor(options);

1. options - (object) key/value set of options.

1. before - (string) the prefix to insert before the selected text
2. after - (string) the suffix to insert after the selected text
3. defaultMiddle - (string) value to insert between the prefix and the suffix if no text was selected (defaults to "SOMETHING HERE")

• (element) This Element.

<input id="test" value="ninjas are the most dangerous thing in the world" />
//let's assume that the user selects the word "ninjas"
$('test').insertAroundCursor({before: "<", after: ">", defaultMiddle: "tag-name"});
//value is now:
//<ninjas> are the most dangerous thing in the world