前言
今天在项目中遇到了这个奇葩的问题,基于ionic的iOS的hybird APP 无法使用focus()获取焦点和键盘的问题。下面让我们来解决这个问题。
问题:基于ionic的iOS的hybird APP 无法使用focus()获取焦点和键盘的问题。
我的代码如下:
directive:
.directive('myFocus', function($timeout, $parse) {
return {
link: function(scope, element, attrs) {
var model = $parse(attrs.myFocus);
scope.$watch(model, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}else if(value === false){
$timeout(function() {
element[0].blur();
});
}
})
}
}
})
html:
<input id="myCommentsInputId" my-focus="isOpen" type="text" placeholder="说点什么">
这么一段简单的代码,在chrome和Android上面调试是正常的,然而在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);
}
};
})
我的解决方案
原来,在iOS App的配置文件(config.xml),里面默认会有一句
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
这里面的大概意思就是,键盘的显示需要用户去触发,而且是设置为true的!!!
那么下面你们知道怎么做了吧,只需要把value的值改为false,一切都解决了。
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
结束
凡事多去研究它的根源问题。