faqts : Computers : Programming : Languages : JavaScript : Forms : TextAreas/TextFields

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

167 of 188 people (89%) answered Yes
Recently 7 of 10 people (70%) answered Yes

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