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

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

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

我的代碼如下:

directive:

.directive('focusMe', function($timeout) {
    return {
        link: function(scope, element) {
            $timeout(function() {
                element[0].focus();
            },300);
        }
    };
})

html:

<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頁面會生效的，這個我沒有嘗試，也請嘗試過得朋友告訴一下我。

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

.directive('focusMe', function($timeout) {
    return {
        link: function(scope, element) {
            element[0].on('click',function(){
                element[0].focus();    
            })
            $timeout(function() {
                element[0].trigger('click');
            },300);
            
        }
    };
})

 

解決方案

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

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

這里面的大概意思就是，鍵盤的顯示需要用戶去觸發，而且是設置為true的！！！

那么下面你們知道怎么做了吧，只需要把value的值改為false，一切都解決了。

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

 

 

最近在學歷es6語法，之后可能會更新es6的學習筆記，有興趣的一起討論哦！