1. 程式人生 > >移動端input搜索的實現

移動端input搜索的實現

boa put board 鍵盤消失 for blog val clas ()

html代碼如下:

<form action="javascript:return true;">
    <input type="search" class="search_input" placeholder="搜索" onblur="$template('datalist').clear().append();$template('totalDesc').clear().append()"/>
</form>

js代碼如下:

$('.search_input').on('keyup',function(e){
    var keycode = e.keyCode;
    var searchContent = $(this).val();
    if(keycode==13) {
        //e.preventDefault();
        $(".location").show();
        $('.icon-tubiao-').show();
        $(".search_cancel").hide();
        if(!$(this).val()) {
            $(this).css("background", "url(/dashboard/disposalParty/img/search_tips.png) #f7f7f7 no-repeat 40%")
        }
        $(this).trigger('blur');
    }
})

IOS上要加上form標簽
技術分享圖片
開發過程中存在的問題:
1.可以調出手機軟鍵盤,但是得用type="search"來統一安卓和蘋果機的搜索按鍵
2.不管是安卓還是蘋果手機,搜索按鍵的keycode都是13,和電腦上的回車鍵一樣
3.點擊鍵盤搜索,頁面鍵盤消失,頁面也會隨之刷新;原因:form會提交,所以要阻止默認事件,這裏寫了e.preventDefault();不好使,沒有找到原因;
在form 標簽裏的action ="javascript:return true;"就解決了;這裏去執行提交,然後返回true,相當於什麽都沒有發生,又代替了默認事件。

網上方案:https://blog.csdn.net/listmana/article/details/53942361

移動端input搜索的實現