如何停止在JavaScript中的窗體中重新加載頁面的輸入密鑰

我有一個搜索欄，其中包含搜索其他網站上的內容的按鈕。我讓它正常工作（它在新標籤中搜索另一個網站），但每當我點擊搜索欄中的輸入，我正在重新加載頁面。首先它按下回車並點擊搜索重新加載，然後我將輸入類型更改爲按鈕而不是提交。點擊按鈕時，這會照顧重新加載，但當按下回車鍵時，頁面會重新加載。此外，它只會重新加載，如果搜索欄被點擊，而不是在任何時候。必須爲回車鍵選擇搜索欄才能重新加載頁面。如何停止在JavaScript中的窗體中重新加載頁面的輸入密鑰

HTML：

<div id="search-3" class="widget widget_search"> 
    <h3 align="center">Search the other site!</h3> 
    <form method="post" name="searchform" id="searchform"> 

     <span class="searching"> 
     <input type="text" value="" name="s" id="s" /> 
     </span> 
     <input class="submit" type="button" Onclick="SearchBlog();" value="Search" /> 

    </form> 
</div>

的javascript：

function SearchBlog() 
{ 
    var searchQuery = document.searchform.s.value; 
    if(searchQuery != ""){ 
     var destination = "website.com/s" + searchQuery; 
     window.open(destination, "_blank"); 
    } 
}

我希望能夠使用回車鍵進行搜索，但我不希望它重新加載頁面。

來源

2012-09-13 Luke Mat

那是因爲你正在提交一個不存在的頁面。

使用onsubmit在<form>聲明代替：

<form method="POST" name="searchform" id="searchform" onsubmit="SearchBlog();"> 
    ... 
</form>

然後確保你return false;在SearchBlog（）函數。你應該很好去。

來源

2012-09-13 15:47:31

這樣，您就可以使用任何提交按鈕/圖像或點擊按下表單中輸入所需的結果提交表單。這對用戶體驗更好！ –

所以我應該擺脫method =「POST」name =「searchform」id =「searchform」並使用onsubmit =「SearchBlog（）;而不是？ –

不，我會放棄所有這些。如果你的用戶沒有啓用Javascript，它將會優雅地降級，但是，添加'onsubmit =「SearchBlog（）;」' –

試試這個：

<input class="submit" type="button" Onclick="return SearchBlog();" value="Search" />

而且

function SearchBlog() 
{ 
    var searchQuery = document.searchform.s.value; 
    if(searchQuery != ""){ 
     var destination = "website.com/s" + searchQuery; 
     window.open(destination, "_blank"); 
    } 
    return false; 
}

來源

2012-09-13 15:47:48 Shmiddty

不是這並不能解決我的問題 –

也許是因爲它的「OnClick」 –

如何停止在JavaScript中的窗體中重新加載頁面的輸入密鑰

回答

相關問題