使用 Javascript 中的按钮防止默认输入键
Prevent default on enter key with a button in Javascript
我有我的 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 但没有。有人对此有想法吗?
- 删除按钮上的所有事件处理程序
- 将按钮设为提交按钮
- 在表单上使用提交事件(如果表单提交是通过输入 或 按钮被点击 或 输入被按下的按钮)
- 阻止默认事件行为(因此表单数据不会提交到浏览器导航到的 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>
我有我的 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 但没有。有人对此有想法吗?
- 删除按钮上的所有事件处理程序
- 将按钮设为提交按钮
- 在表单上使用提交事件(如果表单提交是通过输入 或 按钮被点击 或 输入被按下的按钮)
- 阻止默认事件行为(因此表单数据不会提交到浏览器导航到的 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>