標題有點長
今天早上遇到一個有關 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>
在頁面上長這樣
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>
然後莫名其妙就可以了
第二個方法比較好一點
因為在一個 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 才能動作 = =
如果有高手路過麻煩教導一下~~~感謝~~~
留言列表
CSS、Responsive Web Design (2)