最近公司有一個(gè)項(xiàng)目,要在頁(yè)面中有一個(gè)搜索框荆针,輸入內(nèi)容敞嗡,單擊軟鍵盤上的搜索或完成來(lái)運(yùn)行函數(shù); 開始在想,有沒(méi)有一個(gè)這樣的事件去監(jiān)聽航背,去網(wǎng)上也找不到相關(guān)的資料喉悴!唉!玖媚!
但皇天不負(fù)有心人箕肃,終于發(fā)現(xiàn)了解決的方法
方法一、模擬表單提交今魔,
在input外面包上一個(gè)form標(biāo)簽勺像,當(dāng)用戶在表單中單擊搜索或完成會(huì)觸發(fā)表單的submit事件,所以在submit事件中去處理搜索的邏輯涡贱,并阻止表單的提交
代碼
html
<form action="" id="form"> <input type="text"> </form>
js
$('#form').submit(function(){ // 處理相關(guān)邏輯 return false; })
方法二咏删、用keypress事件
最讓我喜出望外的是惹想,移動(dòng)端的軟鍵盤也是支持keypress问词、keydown、keyup事件的嘀粱,這樣實(shí)現(xiàn)起來(lái)就更加簡(jiǎn)單了激挪,完成的event.keyCode是13,和鍵盤上的回車鍵一樣锋叨,
代碼
html
<input type="text" id ="txt">
js
$("#txt").keypress(function(e){ if(e.keyCode === 13) { // 處理相關(guān)邏輯 } })
- 推薦使用方法二
- 常用的手機(jī)瀏覽器都是兼容的垄分,但不敢保證所有的都是兼容,萬(wàn)一有個(gè)***呢
- 感想: 團(tuán)隊(duì)的協(xié)作是可以很大程度上提升個(gè)人的水平與知識(shí)層面娃磺,方法二是同事告訴我的薄湿,開始我并不相信軟鍵盤會(huì)支持這個(gè)事件,沒(méi)想到還真的支持,
- 所以不要輕易下結(jié)論豺瘤,做過(guò)了吆倦,才知道,去嘗試坐求,才不后悔2显蟆!