D
Dean A. Hoover
Hunting around the internet I found:
http://www.faqts.com/knowledge_base/view.phtml/aid/13562
by Fred Jounters and Martin Honnen. It
shows some interesting functions for manipulating
selections in and input element. At the end
of the article (from my reading) it is implied
that the same stuff will work on a textarea, except
for old versions of netscape.
I'm using Mozilla and it does work with textarea entirely
as expected, but not in IE. I include the slightly modified
code at the end of this message. Specifically, with multiline
data in the textarea, I click the "select string" button and
take the default ("bolo"). In Mozilla it selects the right
thing. In IE, it selects "logy", apparently off by 2.
Anyone know how to fix this so that it will work with
both browsers for both element types (textarea and
input type="text")?
Thanks.
Dean Hoover
Modified example:
<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">
<textarea name="inputName" rows="5" cols="20">1234
1234
Kibology</textarea>
<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>
http://www.faqts.com/knowledge_base/view.phtml/aid/13562
by Fred Jounters and Martin Honnen. It
shows some interesting functions for manipulating
selections in and input element. At the end
of the article (from my reading) it is implied
that the same stuff will work on a textarea, except
for old versions of netscape.
I'm using Mozilla and it does work with textarea entirely
as expected, but not in IE. I include the slightly modified
code at the end of this message. Specifically, with multiline
data in the textarea, I click the "select string" button and
take the default ("bolo"). In Mozilla it selects the right
thing. In IE, it selects "logy", apparently off by 2.
Anyone know how to fix this so that it will work with
both browsers for both element types (textarea and
input type="text")?
Thanks.
Dean Hoover
Modified example:
<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">
<textarea name="inputName" rows="5" cols="20">1234
1234
Kibology</textarea>
<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>