Enter Text

This JavaScript program shows how to take text input in an input element and output it to a separate element.

EnterText.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Javascript</title>
  <style type="text/css">
    #idInput {
      width:200px;
      height:20px;
      border:1px solid black;
      margin:5px;
      color: Gray;
      background-color: GhostWhite;
    }
    #idOutput {
      width:200px;
      height:20px;
      border:1px solid black;
      margin:5px;
      color: Black;
      background-color: LightGray;
    }
  </style>
  <script type="text/javascript" src="EnterText.js"></script>
</head>
<body>
  <h1>Input</h1>
  <input type="text" id="idInput" onkeyup="CheckEnter(event)">
  <h1>Output</h1>
  <div id="idOutput">Nothing Entered Yet!</div>
</body>
</html>

EnterText.js

function CheckEnter(e) {
  var qInputElement = document.getElementById("idInput");
  if (qInputElement == null) {
    document.writeln("idInput div element does not exist.<br />");
  }
  var sEntered = qInputElement.value;
  // This only fills the output when "enter" is pressed.
  switch (e.keyCode) {
    case 13: // Enter key
    {
      var qOutputDiv = document.getElementById("idOutput");
      if (qOutputDiv == null) {
        document.writeln("idOutput div element does not exist.<br />");
      }
      // Cut off the string at 20 characters
      var sAdjusted = sEntered.substr(0, 20);
      // Convert special characters.
      sAdjusted = sAdjusted.replace(/&/g, "&amp;");
      sAdjusted = sAdjusted.replace(/>/g, "&gt;");
      sAdjusted = sAdjusted.replace(/</g, "&lt;");
      sAdjusted = sAdjusted.replace(/"/g, "&quot;");
      sAdjusted = sAdjusted.replace(/'/g, "&#039;");
      qOutputDiv.innerHTML = sAdjusted;
      break;
    }
  }
};