移動端input搜索的實現
阿新 • • 發佈:2019-03-12
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搜索的實現