標題有點長

今天早上遇到一個有關 html + js 的靈異現象,足足卡了一個早上

其實這個程式非常的簡單,簡單到根本沒幾行

後來雖然想辦法解決了但是還是不知道為什麼....

如果有知道為什麼的人跟我說一下原理 (跪 

================================

我要的功能是這樣的 :

頁面上有一個搜尋框

當你在搜尋框打完字後按下鍵盤的 enter 要送出去搜尋頁

簡化後的 html 如下 : 

 <form method="post" action="test.aspx" id="form1">

<!-- 這是搜尋框 -->

<input type="text" name="search_new" id="search_new" class="search_bar" >

<!-- 這是按鈕 -- >

<img src="images/search-icon.png" id="gosearch"> 

</form>

 

在頁面上長這樣 

Clipboard02

 

js 如下 :  (習慣用 jquery)

 

$(document).ready(function () {

$("#search_new").keypress(function (event) {

if (event.keyCode == 13) {

$("#gosearch").trigger("click");

}

});

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

location.href = 'http://xxxx.com/Search.aspx?keyword=' + encodeURI($("#search_new").val());

alert('我執行到這行了!');

});

});

 

上面邏輯很簡單就是如果 search_new 被 keypress 了

就判斷 event.keycode 如果是13 代表按下了 enter

就觸發 gosearch 的 click

 

然後在搜尋框上打完字後按下 enter 發現 location.href 根本沒導頁

但是 alert('我執行到這行了!'); 卻有彈出視窗

感覺比較像是被 submit 到了 form action 的頁面

 

後來試了好多方法包括.....

a. 加了 return false;

b. 改成 window.location.href or document.location.href 

c. 加了 click 的 event.preventDefault();  <--- 取消 and 不執行瀏覽器默認動作

 

然後都無效,頁面還是沒有到 http://xxxx.com/Search.aspx 搜尋頁

 

解決方式

====================================================

後來試出了兩個有效的方法,但其中一個方法有點詭異

先講第一個詭異的方式

 

只要在頁面中再加入另一個 html 的 textbox 就可以了 (不知道為什麼)

所以 html 變這樣  

 

 <form method="post" action="test.aspx" id="form1">

<!-- 這是搜尋框 -->

<input type="text" name="search_new" id="search_new" class="search_bar" />

<input type="text" name="test" id="test" />  <----多加了一個 text 就莫名其妙可以了

<!-- 這是按鈕 -- >

<img src="images/search-icon.png" id="gosearch" /> 

</form>

 

然後莫名其妙就可以了

 Clipboard02

 

第二個方法比較好一點

因為在一個 text 的狀況下按下enter,似乎會導致 form submit 

猜想大概是 location.href 被 form submit 蓋掉了吧

所以只要停止 form submit 應該就可以了

所以 script 改成這樣就可以了

 

$(document).ready(function () {

$("#search_new").keypress(function (event) {

if (event.keyCode == 13) {

$("#gosearch").trigger("click");

}

});

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

       <!--停止所有的 form submit 事件-->

$("form").submit(function () {

return false;

});

location.href = 'http://xxxx.com/Search.aspx?keyword=' + encodeURI($("#search_new").val());

});

});

 

反正本來按下 enter 就是要離開此頁面,所以 form submit 停掉也沒差

所以這樣就解決了

不過還是很想知道發生的原因到底是為何,為什麼頁面上一定要兩個 textbox 才能動作 = =

如果有高手路過麻煩教導一下~~~感謝~~~

 

 

 

arrow
arrow
    全站熱搜

    小雕 發表在 痞客邦 留言(4) 人氣()