兩種方案:
方案一:
<input type="search" class="search-input" placeholder="請輸入搜尋">
// js如下:
$(".search input").keypress(function(e){
var key = $.trim($(this).val());
if(e.keyCode === 13) {
// 搜尋工作
that.search(key);
}
})
方案二:
查了好多文章基本上都說的是監聽keydown事件和判斷鍵盤鍵值碼,本人也試過那個适用于鍵而軟鍵盤我沒能用這個方法實作
我的的form的onsubmit方法實作的,也就是表單送出下邊直接上代碼,這部分是html代碼
<html>
<form target="#" id="search_from">
<input class="search_in" type="search" placeholder="請輸入關鍵詞" />
</form>
這部分是js代碼
<script>
document.getElementById('search_from').onsubmit = function(){
alert("123");
yourfun();
}
這樣基本功能就實作了 。但是這樣的話點選搜尋按鈕往往第一次頁面會重新整理一次,隻有點選第二次才會出現想要的效果,是以我們還需要實作點選頁面不重新整理
<script>
<form target="frameFile" id="search_from">
<input class="search_in" type="search" placeholder="請輸入關鍵詞" />
<iframe name='frameFile' style="display: none;"></iframe>
</form>
像這樣加個iframe标簽就可以了,将from的target對應到iframe的那麼就是不會改變目前頁面的連結,也就不重新整理了
有許多時候我們點選搜尋以後會出現比較長的清單,軟鍵盤會蓋住使用者搜尋的資訊,我們點選一下螢幕才會使軟鍵盤消失,這樣使用者體驗也不是很好,是以我們可以在調用的方法中加一個軟鍵盤收起的方法
<script>
document.getElementById('search_from').onsubmit = function(e){
yourfun();
document.activeElement.blur();//軟鍵盤收起
}
好了這樣一些基本的需求就可以實作了
完!!!