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>

मैं एंटर बटन दबाने पर चाहता हूं कि यह it's flase प्रदर्शित हो, लेकिन फिर एंटर बटन दबाने पर यह पहले आउटपुट प्रदर्शित करता है और फिर पृष्ठ को किसी भी विचार को रीफ्रेश करता है और सुझाव देता है कि इसे रोकने के लिए मुझे क्या करना चाहिए?

मैं बस इतना चाहता हूं कि जब एंटर कुंजी दबाया जाए तो उसे खोज क्षेत्र के नीचे प्रदर्शित करना चाहिए कि 'यह गलत है'

1
Mansi Shukla 21 अक्टूबर 2018, 10:09

1 उत्तर

सबसे बढ़िया उत्तर

जब कीप्रेस इवेंट की डिफ़ॉल्ट कार्रवाई पूरी हो जाएगी, तब पेज को बदल दिया जाएगा, इसलिए आपको keypress इवेंट में एक श्रोता जोड़ना होगा और .preventDefault() को भी कॉल करना होगा, जब enter दबाया जाता है। (keyup ईवेंट को किसी भी चीज़ के लिए preventDefault() की आवश्यकता नहीं है, AFAIK)

हालाँकि, एक और समस्या है; ऐसा लगता है कि आपका 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>
5
CertainPerformance 21 अक्टूबर 2018, 07:25