how can I make a text entry field

Question

How can I make a text entry field that takes the input characters and displays it in another place, character by character as a the typest type them!

Answer 1

You could start by having a look at the sourcecode of the edit fields in this site. The preview is updated as you type.

Answer 2

Use a <input type="text"/> or <textarea></textarea>, and attach a javascript on keypress, keydown or keyup that will copy it to the other field.

Cross-browser script:

<script type="text/javascript">

  var input = document.getElementById("textField");
  var output = document.getElementById("textOutput");

  input.onkeypress = function(){
    setTimeout(
      function(){
        var text = input.value;
        if ("textContent" in output) {
          output.textContent = text;
        } else if("innerText" in output) {
          output.innerText = text;
        } else {
          while (output.childNodes.length) {
            output.removeChild(output.lastChild);
          }
          output.appendChild(document.createTextNode(text));
        }

      },
    0
  )
 };
</script>

setTimeout is needed because when the keypress event is executed the field that generated the event haven't been updated to reflect the change yet. With setTimeout at 0, the function will be delayed to after the field has been updated.

textContent is a standard DOM level 3 property, innerText is a Microsoft proprietary property and if neither is available the DOM is manipulated in a standard way.

Answer 3

Something like this:

<input type="text" id="textField" />
<br />
<span id="textOutput"></span>

<script type="text/javascript">

    var input = document.getElementById("textField");
    var output = document.getElementById("textOutput");

    // sorry, it's better to use "onkeyup" event
    // to avoid the problem described in a post below
    input.onkeyup = function(){
        output.innerText = input.value;
    };
</script>