美文网首页
ionic-解决在iOS中focus失效的问题

ionic-解决在iOS中focus失效的问题

作者: 没有故事的我 | 来源:发表于2017-05-15 16:17 被阅读0次

前言

今天在项目中遇到了这个奇葩的问题,基于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" />

结束

凡事多去研究它的根源问题。

相关文章

网友评论

      本文标题:ionic-解决在iOS中focus失效的问题

      本文链接:https://www.haomeiwen.com/subject/pyuhxxtx.html