Question

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>

我想在按Enter键时应该显示it's flase，但是在按Enter键时它首先显示输出，然后刷新页面。任何想法为什么，并建议我应该采取什么措施来防止这种情况？

我只希望按回车键时应该在搜索字段下方显示“是假的”

Answer 1

当 keypress 事件的默认操作通过时，页面将被替换，因此您需要为keypress事件添加一个侦听器，并在事件发生时调用.preventDefault()按下enter。（keyup事件不需要preventDefault()，AFIAK）

但是，还有另一个问题。您的script标记似乎位于head中，而不必等待文档被填充运行。赋予它defer属性。

<script type="text/javascript" src="js/main.js" defer>

当脚本标签具有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>

如何通过使用javascript在HTML中按Enter键来调用函数？

1 个答案: