解決ionic在ios沒法使用focus,ios focus失效的問題

最近也偷懶，好久沒有寫博客了。今天在項目中遇到了這個奇葩的問題，基於ionic的ios的hybird APP 沒法使用focus()獲取焦點和鍵盤的問題。

問題：基於ionic的ios的hybird APP 沒法使用focus()獲取焦點和鍵盤的問題。

個人代碼以下:

directive:

1 .directive('focusMe', function($timeout) {
2     return {
3         link: function(scope, element) {
4             $timeout(function() {
5                 element[0].focus();
6             },300);
7         }
8     };
9 })

html:

1 <input focus-me type="search"   placeholder="搜索">

這麼一段簡單的代碼，在chrome上面調試是正常的，然而在ios就是怎麼也出不來。

 

尋找解決方案

而後我開始了google、baidu的歷程，在知識的海洋裏翱翔，看到不少奇怪的現象，並且也並無解決個人問題。

好像在 http://twilight.btlogs.com/how-to-focus-html-input-element-with-javascript-on-ios-and-android-mobile-safari/

這裏面主要說的是,只有在監聽了用戶觸發的時間的函數中執行focus纔有用，具體能夠點進去看一下。

我嘗試了一下，發現這個對於hybird App也是沒有任何效果。

可是可能在普通的ios，html5頁面會生效的，這個我沒有嘗試，也請嘗試過得朋友告訴一下我。

我寫的相似於這樣，如下也符合他們說的：

 1 .directive('focusMe', function($timeout) {
 2     return {
 3         link: function(scope, element) {
 4             element[0].on('click',function(){
 5                 element[0].focus();    
 6             })
 7             $timeout(function() {
 8                 element[0].trigger('click');
 9             },300);
10             
11         }
12     };
13 })

 

解決方案

原來，在App的配置文件（config.xml）,裏面默認會有一句

1 <preference name="KeyboardDisplayRequiresUserAction" value="true" />

這裏面的大概意思就是，鍵盤的顯示須要用戶去觸發，並且是設置爲true的！！！

那麼下面大家知道怎麼作了吧，只須要把value的值改成false，一切都解決了。

1 1 <preference name="KeyboardDisplayRequiresUserAction" value="false" />

 

 

最近在學歷es6語法，以後可能會更新es6的學習筆記，有興趣的一塊兒討論哦！