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


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
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
method of input type="text" elements, which takes two number arguments 
indicating the selection start and selection end.
There are also properties
that can be read to check for a selection and its position.
Here is the complete example page
manipulating the selection in an <input type="text" /> element
<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.setSelectionRange(selectionStart, selectionEnd);
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
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
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 + 
    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);
<form name="formName">
<input name="inputName"
<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"
<input type="button"
       value="set caret to start"
<input type="button"
       value="select string"
prompt('string to search for?', 'bolo'));"
<input type="button"
       value="replace selection with Kibo"
       onclick="replaceSelection (this.form.inputName, 'Kibo');"
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...