兩種方案:
方案一:
<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();//軟鍵盤收起
}
好了這樣一些基本的需求就可以實現了
完!!!