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

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

完!!!

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章