使用 Javascript 中的按钮防止默认输入键

Question

我有我的 HTML 代码：

<!DOCTYPE html>
<head>
  <script src="../req.js"></script>
  </head>


<link rel="stylesheet" href="style.css">
<html>

<body>
  <h1> Recipes founder</h1>
  <form class="example">
    <input id ="query" type="text" placeholder="Insert a recipe.." name="search" value="">
    <button id="searchRecipe" type="button" onkeydown="handler(e)" onclick="searchFile()"><i></i>Search</button>

  </form>
  <div id="content"></div>
</body>
</html>

以及与之相关的我的js代码：

function searchFile(e) {
  // enter must do the same
  const q = document.getElementById('query').value;
  const total_q = `Title%3A${q}%20OR%20Description%3A${q}%20OR%20web%3A${q}`
  fetch(
`http://localhost:8983/solr/recipe/select?indent=true&q.op=OR&q=${total_q}&rows=300`, { mode: 'cors' }

  ).then((res) => res.json())
      // Take actual json
      .then(({ response }) => appendData(response))
      .catch(function (err) {
          console.log(err)
      });
  }

function appendData(data) {
    // clear previous research
    document.getElementById("content").innerHTML = "";
    let docs = data.docs;
    // Take each element of the json file
    for (elem of docs) {
        var mainContainer = document.getElementById("content");
        // title recipe
        var a1 = document.createElement("a");
        a1.setAttribute("href", elem.url);
        var div = document.createElement("div");
        div.innerHTML = elem.Title;
        a1.appendChild(div);

        // insert image of recipe and link for page in website
        var a = document.createElement("a");
        a.setAttribute("href", elem.Image);
        var img = document.createElement("img");
        // img.setAttribute("href", elem.url);
        img.setAttribute("src", elem.Image);
        a.appendChild(img);

        // recipe description
        var p = document.createElement("p");
        p.innerHTML = elem.Description;
        // Insert elements in dev
        mainContainer.appendChild(a1);
        mainContainer.appendChild(p);
        mainContainer.appendChild(a);
        
    }
}


function handler(event) {
    if (event == "click") {
       searchFile();
    }
    else if ((event.keyCode || event.which) == 13){
        event.preventDefault();
        event.cancelBubble = true;
        event.returnValue = false;
        event.stopPropagation();
        event.preventDefault();

        searchFile();
    }
    else {
        console.log("Nothing")
    }
}

searchFile() 和 appendData() 做什么并不重要，因为它们有效。目标是当用户单击搜索按钮或按下回车键时，必须调用 searchFile()。单击搜索按钮有效，但问题是当用户单击输入时，它会导航到 http://localhost:8000/?search=SOMETHING（取决于用户插入的内容）。我认为这是回车键的默认行为，我试图使用不同的代码来阻止它，但没有任何效果。我读到我们必须使用 onkeydown 而不是使用事件 onkeypress 但我仍然处于相同的情况。我也尝试等待加载 DOM 但没有。有人对此有想法吗？

Answer 1

删除按钮上的所有事件处理程序
将按钮设为提交按钮
在表单上使用提交事件（如果表单提交是通过输入或按钮被点击或输入被按下的按钮）
阻止默认事件行为（因此表单数据不会提交到浏览器导航到的 URL）
不要费心做任何测试来试图弄清楚是点击还是其他原因，只要表单已提交，这一切都很重要。

const submitHandler = (event) => {
    event.preventDefault();
    alert("You can do your ajax search here");
};

document.querySelector('.example').addEventListener('submit', submitHandler);

  <form class="example">
    <input id="query" type="text" placeholder="Insert a recipe.." name="search" value="">
    <button>Search</button>
  </form>

使用 Javascript 中的按钮防止默认输入键

Prevent default on enter key with a button in Javascript

javascript

html

events

keypress

enter