Entry
How can I store the caret(cursor) position of a text field/text area?
How can I insert text at the caret(cursor) position of a text field/text area?
Nov 17th, 2000 02:04
Stefan Vogel, Martin Honnen,
Although there is no js api for the caret position IE4/5 has a text
range object for document selections that allows to store the
caret
position in a text field or text area.
<HTML>
<HEAD>
<SCRIPT>
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
text + ' ' : text;
}
else
textEl.value = text;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" WRAP="soft"
ONSELECT="storeCaret(this);"
ONCLICK="storeCaret(this);"
ONKEYUP="storeCaret(this);"
>
Kibology for all.
All for Kibology.
</TEXTAREA>
<BR>
<INPUT TYPE="text" NAME="aText" SIZE="80" VALUE="Scriptology">
<BR>
<INPUT TYPE="button" VALUE="insert at caret"
ONCLICK="insertAtCaret(this.form.aTextArea,
this.form.aText.value);"
>
</FORM>
</BODY>
</HTML>
To get the correct behaviour when someone selects a word with a double-
click, you should add
ONDBLCLICK="storeCaret(this);"
to the textarea.
For NN4 I don't know of an HTML textarea solution so a workaround is to
use a Java textarea. You can do this either as a plugged in component
(so called beanconnecting the component) with the OBJECT tag as the
below example shows or with a custom made Java applet.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM ACTION="jsInterpreter.html"
ONSUBMIT="this.aTextArea.value = document.aTextArea.getText();">
<INPUT TYPE="hidden" NAME="aTextArea">
some hmtl field:
<INPUT TYPE="text" NAME="aField" VALUE="Kibology"
ONBLUR="document.aTextArea.requestFocus()"
>
<BR>
a java.awt.TextArea:
<OBJECT ID="aTextArea"
CLASSID="javabean:java.awt.TextArea"
WIDTH="200" HEIGHT="60"
>
<PARAM NAME="Rows" VALUE="5">
<PARAM NAME="Columns" VALUE="20">
<PARAM NAME="Text" VALUE="All for Kibology. Kibology for all.">
</OBJECT>
<BR>
<INPUT TYPE="submit">
</FORM>
<FORM NAME="gui">
<INPUT TYPE="BUTTON" VALUE="get caret"
ONCLICK="this.form.caret.value =
document.aTextArea.getCaretPosition();"
>
<INPUT TYPE="text" NAME="caret" SIZE="4">
<INPUT TYPE="button" VALUE="set caret"
ONCLICK="document.aTextArea.setCaretPosition(parseInt
(this.form.caret.value, 10));"
>
<BR>
<INPUT TYPE="text" NAME="aText" VALUE="Scriptology for all. " SIZE="80">
<INPUT TYPE="button" VALUE="insert at caret"
ONCLICK="document.aTextArea.insert(this.form.aText.value,
document.aTextArea.getCaretPosition());"
>
</FORM>
<BR>
</BODY>
</HTML>
