没有按钮的文本框。如果您键入一些字母并按 'Enter'，1 秒后会出现带有文本框中文本的警告对话框

Question

我想制作一个没有按钮的带有文本框的网页。如果我键入几个字母并按下按钮 'Enter'，在 1 秒后出现带有文本框中文本的警告对话框。一切正常，只是那个警告对话框不是在输入后出现的，而是在鼠标单击后出现的。

<!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>

Answer 1

只需在文本框 keydown 上设置一个事件，并将计时器移动到 if 语句的 true 块中。

备注：

你的 DOCTYPE 是错误的。应该只有感叹号开始吧。
要使您的 HTML 文档有效，您必须添加 non-empty title head 部分中的元素。您不能嵌套 head 元素在另一个 head 元素内。
如果您希望文本框为空，则无需添加 value="".
Passing a string of JavaScript to setTimeout() is not advised. 而是传递一个要执行的函数。
而不是将 script 放在 head 中，然后设置一个 window.onload 应该运行的代码的事件处理程序当 DOM 准备就绪时自动将 script 移动到在关闭 body 标记之前并删除 onload 事件处理程序然后执行你想要的代码运行.
此外，无需扫描该元素的事件处理程序。您可以只访问文本框在 e.target.
Don't use self-terminating tags.
使用 h2 而没有 h1 在语义上是不正确的，会给那些依赖辅助技术的人带来问题。绝不使用 HTML 元素，因为浏览器的样式默认。造型是 CSS 的工作。如果你想要一些大而粗的文字并且是不开始一个新的部分，远离标题元素，只是设置文本样式。

<!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>

Answer 2

这使用 Jquery 检测按下的回车键。

备注：

<input> 不需要 / 因为它是一个自闭合标签。有关详细信息，请参阅 Are (non-void) self-closing tags valid in HTML5?。
您不能嵌套 2 个 <head> 标签。必须是 <title>.
<!Doctype html> 在 <.

!

如果你想让它只在文本框更改内提醒

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

至

$(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>

没有按钮的文本框。如果您键入一些字母并按 'Enter'，1 秒后会出现带有文本框中文本的警告对话框

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

javascript

settimeout

alert

enter