的onsubmit window.location的工作不

Question

我有一個文本框和一個搜索按鈕。

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

UPDATE

當你按下回車鍵，形式將啓動提交事件。默認情況下，如果您沒有指定目標（在action屬性中），頁面將自動提交給自己。既然你沒有取消提交事件，即使你試圖將用戶重定向到不同的頁面，頁面提交將會主持並完成提交;因此，該網頁永遠不會重定向到google.com。

而且，@Quentin在他的評論中提到的，最好的做法改變：

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

到

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

因爲事件對象是不同的瀏覽器不同的處理。