没有按钮的文本框。如果你输入一些字母并按下'Enter'键，1秒钟后会出现一个带有文本框文字的提示对话框。

问题描述 投票：0回答：1

我想做一个有文本框的网页，没有按钮。如果我输入几个字母并按下 "Enter "按钮，1秒钟后会出现一个带有文本框文字的提示对话框，一切正常，只是提示对话框不是在Enter后出现，而是在鼠标点击后出现。一切正常，只是警报对话框不是在Enter后出现，而是在鼠标点击后出现。

<!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>
javascript settimeout alert enter
1个回答
1
投票

只要在文本框上设置一个事件。keydown，并将定时器移入 true 块的 if 声明。

注释：你的DOCTYPE是错误的。

  • 你的DOCTYPE是错误的。它的开头应该只有一个感叹号。
  • 为了使您的HTML文档有效，您必须在其中添加一个非空的 title中的元素 head 节。你不能嵌套一个 head 内含元素 head 元素。
  • 如果你希望你的文本框是空的，那么就不需要添加value="".
  • 传递一串JavaScript到 setTimeout() 不建议使用。而是传递一个要执行的函数。
  • 而不是将你的 script 在 head 然后建立window.onload 事件处理程序，当DOM准备好时，该代码应该自动运行，将你的 script 到闭幕前 body 标签，并删除 onload 事件处理程序，只需执行你想运行的代码。
  • 另外，不需要在事件处理程序中扫描该元素的文本框元素。你可以只在处理程序中用 e.target.
  • 不要使用自终止标签。
  • 使用 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>
1
投票

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

笔记。

  • <input> 不需要a，因为它是一个自我关闭的标签。更多信息请看 在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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.