Entry
How can I manipulate the selection and the caret in an input type="text" element in NN6 and IE?
How can I manipulate the selection and the caret in an input type="text" element in NN6 and IE?
How can I enter text at the caret in a <textarea> element with Mozilla 1.3+?
Oct 28th, 2003 01:25
Fred Jounters, Martin Honnen, http://www.ecademy.com/test/textarea/
As for doing this with IE4+ (on Win), see
http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
and
http://www.faqts.com/knowledge_base/view.phtml/aid/1159/fid/130
too.
This entry provides a solution for input type="text" elements that has
been tested to work with NN6.1 and NN6.2.
The functions provided to set the caret to different positions and to
set the selection should work with IE4+ too, the example to replace
the selection should work with IE5.5+, for the IE4/5 solution check
the first url above.
The NN6 solution uses the so far undocumented
setSelectionRange
method of input type="text" elements, which takes two number arguments
indicating the selection start and selection end.
There are also properties
selectionStart
selectionEnd
that can be read to check for a selection and its position.
Here is the complete example page
<html>
<head>
<title>
manipulating the selection in an <input type="text" /> element
</title>
<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function setCaretToEnd (input) {
setSelectionRange(input, input.value.length, input.value.length);
}
function setCaretToBegin (input) {
setSelectionRange(input, 0, 0);
}
function setCaretToPos (input, pos) {
setSelectionRange(input, pos, pos);
}
function selectString (input, string) {
var match = new RegExp(string, "i").exec(input.value);
if (match) {
setSelectionRange (input, match.index, match.index + match
[0].length);
}
}
function replaceSelection (input, replaceString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart)
+ replaceString
+ input.value.substring(selectionEnd);
if (selectionStart != selectionEnd) // has there been a selection
setSelectionRange(input, selectionStart, selectionStart +
replaceString.length);
else // set caret
setCaretToPos(input, selectionStart + replaceString.length);
}
else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = replaceString;
if (!isCollapsed) { // there has been a selection
//it appears range.select() should select the newly
//inserted text but that fails with IE
range.moveStart('character', -replaceString.length);
range.select();
}
}
}
}
</script>
</head>
<body>
<form name="formName">
<input name="inputName"
type="text"
value="Kibology"
/>
<input type="button"
value="set selection range to 4, 8"
onclick="window.setSelectionRange(this.form.inputName, 4, 8);"
/>
<input type="button"
value="set caret to end"
onclick="setCaretToEnd(this.form.inputName);"
/>
<input type="button"
value="set caret to start"
onclick="setCaretToBegin(this.form.inputName);"
/>
<input type="button"
value="select string"
onclick="selectString(this.form.inputName,
prompt('string to search for?', 'bolo'));"
/>
<input type="button"
unselectable="on"
value="replace selection with Kibo"
onclick="replaceSelection (this.form.inputName, 'Kibo');"
/>
</form>
</body>
</html>
Netscape 6.x.y and Netscape 7.0.z doesn't implement the
setSelectionRange function for <textarea> elements thus the approach
above doesn't work for <textarea> elements with those browsers. However
Mozilla 1.3+ correctly implements
setSelectionRange/selectionStart/selectionEnd for <textarea> elements so
you can use the code for <textara> elements too with those browsers.
Addition by Fred Jounters:
For a working example (IE and Moz-derivates) look at
http://www.ecademy.com/test/textarea/ . It's free and can be easily
adapted to Your needs. Unfortunately, it looks like the caret position
cannot be "restored" after a textinsert at caret position in Mozilla...
