我有一个文本框和一个搜索按钮。
Onclicking
search button window.location
正在工作。
但是在按下回车键时 window.location
不起作用。
我读过当按下回车键时提交有效,但为什么在这里按下回车键 window.location 不起作用。
这是我的代码:
<div>
<form id="form">
<input id="bar"
style="height:26px; left:29%; top:270px; position:absolute;
border:1px solid #CCC;
font:20px arial,sans-serif;
background-color:transparent; z-index:6; outline:none;
width:500px;"
spellcheck="true";
onfocus="";
type="text" value="" title="Search" autocomplete="on" maxlength="2048" />
</form>
<input id="searchbutton"
style="height:30px; top:330px; position:absolute; left:33%; background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.1);
background-color:#f8f8f8;
border:1px solid #c6c6c6;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
color:#333;
border-radius:2px;"
type="button" value="Google Search"/>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#searchbutton").click(function() {
var q;
q = $("#bar").val();
window.location = "https://www.google.com/search?q=" + q;
});
$('#form').submit(function() {
var q;
q = $("#bar").val();
window.location = "https://www.google.com/search?q=" + q;
});
});
</script>
最佳答案
您需要取消表单提交。尝试将代码更改为如下所示:
<script>
$(document).ready(function(){
$("#searchbutton").click(function(){
var q;
q=$("#bar").val();
window.location = "https://www.google.com/search?q="+q;
});
$('#form').submit(function(){
var q;
q=$("#bar").val();
window.location = "https://www.google.com/search?q="+q;
event.preventDefault();
});
});
</script>
更新
当您按下回车键时,表单将启动提交事件。默认情况下,如果您没有指定目的地(在 action 属性中),页面将提交给自己。由于您没有取消提交事件,即使您试图将用户重定向到另一个页面,页面提交也将占据主导地位并完成提交;因此,页面永远不会重定向到 google.com。
此外,正如@Quentin 在他的评论中提到的,最好的做法是更改:
$("#searchbutton").click(function(){
到
$("#searchbutton").click(function(event){
因为事件对象在不同浏览器中的处理方式不同。
关于javascript - Onsubmit window.location 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20935919/