Question

我有一个文本框和一个搜索按钮。

Onclicking 搜索按钮 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>

Answer 1

您需要取消表单提交。尝试将代码更改为：

<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>

<强>更新

当您按Enter键时，表单将启动提交事件。默认情况下，如果未指定目标（在action属性中），页面将自行提交。由于您没有取消提交事件，即使您尝试将用户重定向到其他页面，页面提交也将取消主持并完成提交;因此，页面永远不会重定向到google.com。

另外，正如@Quentin在评论中提到的，最佳做法是改变：

$("#searchbutton").click(function(){

到

$("#searchbutton").click(function(event){

因为事件对象在不同浏览器中的处理方式不同。

提交window.location无法正常工作

1 个答案: