zoukankan      html  css  js  c++  java
  • 解决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的学习笔记,有兴趣的一起讨论哦!

      

  • 相关阅读:
    一道编程面试题
    AtCoder Grand Contest 016 B
    AtCoder Regular Contest 076 D
    Codeforces Round #419 (Div. 2) B. Karen and Coffee
    2017 计蒜之道 复赛 Windows画图+百度地图导航
    Codeforces Round #418 (Div. 2) B. An express train to reveries
    棠梨煎雪
    Bits And Pieces
    Let Them Slide
    TeaTree
  • 原文地址:https://www.cnblogs.com/dannyxie/p/5806780.html
Copyright © 2011-2022 走看看