Member Avatar for jakoso

I am trying to code a webpage that does the following:

Listens for user key presses in an input box and dynamically writes them below the input box in a textarea.

Any help?

  • 3 Contributors
  • 5 Replies
  • 90 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Thirusha

Dani AI

Generated

Short diagnosis and why it worked in IE but not Firefox: the code in the original post had a mismatched variable reference, which Firefox treated as an actual error. Older IE builds expose element IDs as globals on the window object, so that bug was silently masked there. was right to call the element directly. For a robust solution, avoid relying on ID-as-global behavior and copy the textarea value (not innerHTML) in response to the input event.

A simple, modern pattern (run after the DOM exists):

<textarea id="source" rows="3"></textarea>
<textarea id="mirror" rows="3" readonly></textarea>

<script>
(function(){
  var src = document.getElementById('source');
  var mir = document.getElementById('mirror');
  function sync(){ mir.value = src.value; }
  if (src.addEventListener) {
    src.addEventListener('input', sync, false);
  } else {
    // IE8 fallback
    src.attachEvent('onkeyup', sync);
    src.attachEvent('onpaste', function(){ setTimeout(sync, 0); });
  }
})();
</script>

Notes and troubleshooting:

  • Use the input event to catch typing, IME composition, and paste; see input event.
  • For textareas, read and write the .value property rather than .innerHTML; .innerHTML treats content as HTML and can behave inconsistently — see HTMLTextAreaElement.value and Element.innerHTML.
  • If nothing updates, open the console (Firebug or built-in devtools) and look for "xxx is not defined" errors — that points to a wrong variable or missing element.
  • Keep IDs unique and ensure the script runs after the elements exist (place script at the end of body or run on DOMContentLoaded).

Finally, was correct that a textarea can be used directly; this pattern simply mirrors one textarea into another reliably across browsers.

Recommended Answers

All 5 Replies

Member Avatar for almostbob

textarea IS an input
you could just type in the textarea

Member Avatar for jakoso

Thank you.
It it clear that I was fixated on the input and did not think of a text area as an input.

I found the following online.
It works in IE but not in FireFox.
Any suggestions on making it work in FireFox?

<script Language="Javascript">
<!--
function typewriter(typein) {
    var typeoutObj = document.getElementById('typeout');
    typeout.innerHTML = typein;
}
-->
</script>

Type In Here:

<textarea rows="3" name="typein" onkeyup="typewriter(this.value);"></textarea>
<br/><br/>
Type Out Here: <textarea id="typeout" readonly></textarea >
Edited by mike_2000_17 because: Fixed formatting
Member Avatar for Thirusha

works for me in FF, i m using FF 3.5.2

it did give one warning, regarding the use of document.getElementById, so i changed the code to this and it still works but this time with no warning:

function typewriter(typein) {
document.getElementById('typeout').innerHTML = typein;
}

What error are u getting?
Have u tried firebug?

Member Avatar for jakoso

I was not getting an error.
I will check Firebug.
Thanks for the help

Member Avatar for Thirusha

Sorry, i thought u had an error, the thread wasnt marked solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.