Text box without button. If you type some letters and push 'Enter', comes after 1 second alert dialog box with text from text box

Question

I'd like to make a webpage with text box without button. If i type couple of letters and push button 'Enter', comes after 1 second alert dialog box with text from text box. Everything works correct, only that aler dialog box doesn`t come after Enter, but after mouse click.

<!Doctype HTML!>
<html>
<head>
  <meta charset="utf-8">
  <head>6-4</head>
  <script>
 
var keyCode = '';
var naam = '';

window.onload = function () {
  
  var divResult = document.getElementById('divResult');
  
  document.getElementById('txtInput').addEventListener('blur', function () {
    naam = document.getElementById('txtInput').value;
    
    document.getElementById('txtInput').onkeyup = function (e) {
      keyCode = e.keyCode;
      if (keyCode === 13) {
      }
    };
    setTimeout("alert(naam);", 1000);
  }, false);
};
function stopAlerts() {
  clearInterval(txtNaam);
}
  
  </script>
</head>
<body>
  <h2>Type some letters in text box and push 'Enter'</h2>
  <input type="text" id="txtInput" value="" />
  <div id="divResult"></div>
</body>
</html>

Scott Marcus · Accepted Answer · 2020-05-06T21:08:17.643

Just set one event on the textbox, keydown, and move the timer into the true block of the if statement.

Notes:

Your DOCTYPE is wrong. There should only be an exclamation at the start of it.
For your HTML document to be valid, you must add a non-empty title element in the head section. You cannot nest a head element within anther head element.
If you want your textbox to be empty, there's no need to add value="".
Passing a string of JavaScript to setTimeout() is not advised. Instead pass a function to be executed.
Instead of placing your script in the head and then setting up a window.onload event handler for the code that should run automatically when the DOM is ready, move your script to just before the closing body tag and remove the onload event handler and just execute the code you want run.
Also, there is no need to scan for the textbox element within the event handler for that element. You can just access the textbox within the handler with e.target.
Don't use self-terminating tags.
Using an h2 without having an h1 is semantically incorrect and will cause issues for those who rely on assistive technologies. Never use an HTML element because of the way the browser styles it by default. Styling is CSS' job. If you want some big, bold text and are not starting a new section, stay away from heading elements and just style the text.

<!doctype HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>6-4</title>
  <style>
    h1 { font-size:1.1em; }
  </style>
</head>
<body>
  <h1>Type some letters in text box and push 'Enter'</h1>
  <input type="text" id="txtInput">
  <div id="divResult"></div>
  
  <script>
    var divResult = document.getElementById('divResult');
    document.getElementById('txtInput').addEventListener('keydown', function (e) {
      if (e.key === "Enter") {
          setTimeout(function(){ alert(e.target.value); }, 1000);
      }
    }, false);
  </script>
</body>
</html>

FYI, `keyCode` is deprecated, superseded by `KeyboardEvent.key`. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key — terrymorse, May 05 '20 at 19:34
Thanks for your explanation. I appreciate that. :-) I do javascript/jquery course so all those advices are important for me. — Prove, May 06 '20 at 18:34

score 1 · Answer 2 · 2020-05-10T17:47:00.447

This uses Jquery to detect enter key pressed.

Notes:

<input> doesn't need a / because it is a self closing tag. For more info on that see Are (non-void) self-closing tags valid in HTML5?.
You cannot nest 2 <head> tags. It has to be <title>.
<!Doctype html> can only have 1 ! at the <.
If you want it to only alert inside the text box change

$(document).on('keydown',function(event) {
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if (keycode == '13') {
      alert(document.getElementById("txtInput").value);
   }
});

to

$(document).on('keydown',function(event) {
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if (keycode == '13') {
      alert(document.getElementById("txtInput").value);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!Doctype Html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    h1 {
      font-size: 1.1em;
    }
  </style>
  <title>6-4</title>
  <script>
    $(document).on('keydown', function(event) {
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if (keycode == '13') {
        alert(document.getElementById("txtInput").value);
      }
    });
  </script>
</head>

<body>
  <h1>Type some letters in text box and push 'Enter'</h1>
  <input type="text" id="txtInput">
  <div id="divResult"></div>
</body>

</html>

Text box without button. If you type some letters and push 'Enter', comes after 1 second alert dialog box with text from text box

2 Answers2