javascript - Onsubmit window.location 不工作

Question

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

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>

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>

更新

当您按下回车键时，表单将启动提交事件。默认情况下，如果您没有指定目的地(在 action 属性中)，页面将提交给自己。由于您没有取消提交事件，即使您试图将用户重定向到另一个页面，页面提交也将占据主导地位并完成提交；因此，页面永远不会重定向到 google.com。

此外，正如@Quentin 在他的评论中提到的，最好的做法是更改:

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

到

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

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