如何在用户按下输入时使搜索工作
这是按钮创建的按钮,当用户单击搜索选项卡时,该按钮具有可进入页面的功能,但我需要它在用户压力机也进入。如何在用户按下输入时使搜索工作
这是搜索栏和按钮
<input type="text" method="get" class="form-control" id="search" placeholder="Search" value="">
<button type="button" id="go" class="btn btn-default" onclick="sendToPage();">Search</button>
这是函数
function sendToPage(){
var input = document.getElementById("search").value;
//Check to see if the user has entered apple/iphone;
if (input === "apple"){
//location.href="apple.html";
location.replace("apple.html");
return false;
}
else if (input === "iphone"){
location.replace("apple.html");
return false;
}
}
您可以添加keyup
,检查其event.keyCode
。如果键码是13
,则表示用户在输入文本上单击了输入。
事情是这样的:
document.getElementById("search")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
if (input === "apple")
location.replace("apple.html");
else if (input === "iphone")
location.replace("apple.html");
}
return false;
});
或使用功能sendToPage()
:
document.getElementById("search")
.addEventListener("keyup", function(event) {
event.preventDefault();
sendToPage();
return false;
});
尝试使用,但然后表单提交每次我按下一个键时,当用户开始键入他们寻找它触发事件和搜索功能不运行 –
This is the button
<!-This is the button -->
<div id="search-bar">
<div class="form-group">
<input type="text" method="get" class="form-control" id="search" placeholder="Search" value="">
<button type="button" id="go" class="btn btn-default" onclick="sendToPage();" onChange="aliasonclick">Search</button>
</div>
</div>
看来你输入字段的ID是 '搜索',所以你可以试试这个: 请注意,输入的键码是13.因此我们可以将输入的码与13进行比较。如果它的真实,那么进行搜索。
$('#search').keydown(function(event) {
if (event.keyCode == 13) {
var input = $(this).val();
if (input === "apple"){
//location.href="apple.html";
location.replace("apple.html");
return false;
}
else if (input === "iphone"){
location.replace("apple.html");
return false;
}
return false;
}
});
});
谢谢安库什,这是有道理的。我会尝试这个例子。 –
Iv'e尝试过所有这些示例,但它们都不起作用:( –
在输入周围放置一个表格应该会给你你要找的结果。然后,只需在调用sendToPage()的窗体中添加一个“onsubmit”;功能。
我试过,然后onclick函数不起作用 –
@JadePage按钮的onclick函数不适用于表单中的onsubmit? – SirPizzaRolls
没有任何作用当我使用表单并更改onClick并提交 –
你的按钮点击代码在哪里?或者什么是按钮名称? –