天天看點

移動端H5頁面,通過點選軟鍵盤搜尋按鈕實作搜尋功能

移動端H5頁面,通過點選軟鍵盤搜尋按鈕實作搜尋功能

兩種方案:

方案一:

<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();//軟鍵盤收起
}
           

好了這樣一些基本的需求就可以實作了

完!!!