如何通过使用javascript在HTML中按Enter键来调用函数？
[英]How to call a function by pressing enter key in html using javascript?
问题描述
var input = document.getElementById("search"); function showTrue() { document.getElementById("output").innerHTML = "It's true"; } function showFalse() { document.getElementById("output").innerHTML = "It's false"; } // Get the input field // Execute a function when the user releases a key on the keyboard input.addEventListener("keyup", function(event) { // Cancel the default action, if needed event.preventDefault(); // Number 13 is the "Enter" key on the keyboard if (event.keyCode === 13) { // Trigger the button element with a click showFalse(); } });
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="author" content="colorlib.com"> <link href="https://fonts.googleapis.com/css?family=Poppins:400,800" rel="stylesheet" /> <link href="css/main.css" rel="stylesheet" /> <script type="text/javascript" src="js/main.js"> </script> </head> <body style="background-color:black"> <div class="s006"> <form> <fieldset> <legend>What are you looking for?</legend> <div class="inner-form"> <div class="input-field"> <button id="trueButton" onclick="showTrue()" class="btn-search" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> </svg> </button> <input id="search" type="text" placeholder="Test you news here" value="" /> </div> </div> </fieldset> <p style="font-size: 36px; color: #fff; font-weight: 800; text-align: center; margin-bottom: 59px;" id="output"></p> </form> </div> </body><!-- This templates was made by Colorlib (https://colorlib.com) --> </html>
I want on pressing enter button it should display that it's flase but then on pressing enter button it first displays the output and then refreshes the page any idea why and suggestion what shoud I do to prevent it ? 
我想按回车按钮时，它应该显示出it's flase ，然后按回车按钮时，它首先显示输出，然后刷新页面。任何想法为什么，并建议我应该采取什么措施来防止这种情况？
I just want that when enter key is pressed it should display the out below the search field that 'it's false' 我只希望按回车键时应该在搜索字段下方显示“是假的”
1 个解决方案
解决方案1
5 已采纳 2018-10-21 07:12:21
The page will be replaced when the keypress event's default action goes through, so you need to add a listener to keypress events and call .preventDefault() on them as well when enter is pressed. 当按键事件的默认操作执行.preventDefault() ，页面将被替换，因此您需要为keypress事件添加一个侦听器，并在按下enter键时也对其调用.preventDefault() 。 ( keyup events don't need preventDefault() for anything, AFAIK) （ keyup事件不需要任何东西的preventDefault() ，AFAIK）
There's another problem, though; 但是，还有另一个问题。 it looks like your script tag is in the head and doesn't wait for the document to be populated to run. 看起来您的script标签在head ，并且不等待文档被填充运行。 Give it the defer attribute. 赋予它defer属性。
<script type="text/javascript" src="js/main.js" defer>
When a script tag has the defer attribute, it will wait for the document to be loaded before running. 当脚本标签具有defer属性时，它将在运行之前等待文档被加载。
var input = document.getElementById("search"); function showTrue() { document.getElementById("output").innerHTML = "It's true"; } function showFalse() { document.getElementById("output").innerHTML = "It's false"; } // Get the input field input.addEventListener("keypress", function(event) { if (event.keyCode === 13) { event.preventDefault(); } }); // Execute a function when the user releases a key on the keyboard input.addEventListener("keyup", function(event) { // Number 13 is the "Enter" key on the keyboard if (event.keyCode === 13) { // Trigger the button element with a click showFalse(); } });
<body style="background-color:black"> <div class="s006"> <form> <fieldset> <legend>What are you looking for?</legend> <div class="inner-form"> <div class="input-field"> <button id="trueButton" onclick="showTrue()" class="btn-search" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> </svg> </button> <input id="search" type="text" placeholder="Test you news here" value="" /> </div> </div> </fieldset> <p style="font-size: 36px; color: #fff; font-weight: 800; text-align: center; margin-bottom: 59px;" id="output"></p> </form> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.