Entry
How can I reflect inputted text into a text element?
How can I reflect inputted text into a text element?
Mar 9th, 2000 08:28
Martin Honnen, Liang Li,
Capture the keyup event and use dom methods to write the value of the
text field/text area to a text page element. For NN4 that requires the
text element to be positioned. The following is an example which
captures the key events of a text field and a text area and writes the
value to a DIV. (No conversion is done so white space in the text field
is treated as HTML whitespace (causing one blank whether it is a space
or a line break) but of course you could use string functions to
replace linebreaks with <BR> elements.)
<HTML>
<HEAD>
<STYLE>
#textOutput { position: absolute; background-color: lightblue; layer-
background-color: lightblue; }
</STYLE>
<SCRIPT>
function rewriteLayer (id, html) {
if (document.layers) {
var l = document[id];
l.document.open();
l.document.write(html);
l.document.close();
}
else if (document.all) {
document.all[id].innerHTML = html;
}
else if (document.createRange) {
var l = document.getElementById(id);
var r = document.createRange();
while (l.hasChildNodes())
l.removeChild(l.lastChild);
r.setStartAfter(l);
var docFrag = r.createContextualFragment(html);
l.appendChild(docFrag);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="text" NAME="aField"
ONKEYUP="rewriteLayer ('textOutput', this.value); return true;"
>
<BR>
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="20"
ONKEYUP="rewriteLayer('textOutput', this.value); return true;"
>
</TEXTAREA>
</FORM>
<DIV ID="textOutput"></DIV>
</BODY>
</HTML>
