1. 程式人生 > >angularjs之手機輸入法回車變搜索,並觸發事件,兼容pc回車事件

angularjs之手機輸入法回車變搜索,並觸發事件,兼容pc回車事件

綁定 ima 識別 andro selector and src res win

一、效果:回車按鈕變搜索

之前的輸入法:

技術分享圖片

之後的輸入法:

技術分享圖片

二、功能實現

<input type="search" id="search_input" placeholder="請輸入" ng-keypress="search($event)"/>

  1、將input的type屬性寫成search,輸入法回車按鈕會變成搜索,android有效,ios沒變。

  2、給input綁定keypress事件,android可以實現搜索效果,ios每次點擊輸入法都會觸發事件,未達到效果。

  3、識別按鍵碼,當keyCode為13的時候執行搜索代碼,android有效,ios有效,pc有效

$scope.search = function(e){
       var key_code = window.event?e.keyCode:e.which;
       if(key_code==13){
            //此處寫搜索事件的代碼
       }
 }

三、當我們點擊搜索按鈕之後,希望軟鍵盤能自動收起來

   可以在搜索事件的代碼最後加上一句代碼:

document.querySelector("#search_input").blur();

angularjs之手機輸入法回車變搜索,並觸發事件,兼容pc回車事件