最近也偷懒,很久没有写博客了。今天在项目中遇到了这个奇葩的问题,基于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的学习笔记,有兴趣的一起讨论哦!

  

解决ionic在ios无法使用focus,ios focus失效的问题的更多相关文章

  1. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  2. Mac下安装ionic和cordova,并生成iOS项目

    为了开发HTML5,除了最新使用React Native等之外,目前首选的为稳定的ionic+Angularjs来开发iOS和android. Ionic(ionicframework一款接近原生的H ...

  3. 讲述Sagit.Framework解决:双向引用导致的IOS内存泄漏(中)- IOS不为人知的Bug

    前言: 话说昨晚还是前晚,写了一篇:讲述Sagit.Framework解决:双向引用导致的IOS内存泄漏(上) 文章写到最后时,多了很多莫名奇妙的问题!!! 为了解决了这些莫名奇妙的问题,我又战斗了2 ...

  4. 讲述Sagit.Framework解决:双向引用导致的IOS内存泄漏(下)- block中任性用self

    前言: 在处理完框架内存泄漏的问题后,见上篇:讲述Sagit.Framework解决:双向引用导致的IOS内存泄漏(中)- IOS不为人知的Bug 发现业务代码有一个地方的内存没释放,原因很也简单: ...

  5. ios端position为fixed失效的解决办法

    关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...

  6. 苹果IOS下text-shadow与box-shadow失效的解决办法

    加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none

  7. ionic默认样式android和ios差异

    ionicframework中android和ios在默认样式上有一些不同的地方,官方文档中都有说明,但是经常会想不起. 一.差异: 1.tab位置,$ionicConfigProvider, tab ...

  8. Project support for both iOS 6 and iOS 7

    原文:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/S ...

  9. iOS 7 UI 过渡指南 - 支持续 iOS 6(iOS 7 UI Transition Guide - Supporting iOS 6)

    iOS 7 UI Transition Guide Preparing for Transition Before You Start Scoping the Project Supporting i ...

  10. iOS开发 - 兼容iOS 10

    1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大改重构,这让开发者也体会到UserN ...

随机推荐

  1. SVN Cleanup failed的解决办法

    一开始没有更新执行了提交操作,提示有冲突 再执行更新操作的时候出现了“之前操作未完成,如果该操作被中断了执行cleanup命令”的提示

  2. 描述cookie,sessionstroage,localstrage的区别

    HTML5 提供了两种在客户端存储数据的新方法(Web Storage): localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 ...

  3. u检验、t检验、F检验、X2检验 (转)

    http://blog.renren.com/share/223170925/14708690013 常用显著性检验 1.t检验 适用于计量资料.正态分布.方差具有齐性的两组间小样本比较.包括配对资料 ...

  4. AngularJS - contorller app module

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. JDK1.7中调用javascript方法

    import java.io.File; import javax.script.Invocable; import javax.script.ScriptEngine; import javax.s ...

  6. nodejs的mysql模块学习(三)数据库连接配置选项详解

    连接选项 当在创建数据连接的时候 第一种大多数人用的方法 let mysql = require('mysql'); let connection = mysql.createConnection({ ...

  7. 沈逸老师ubuntu速学笔记(2)-- ubuntu16.04下 apache2.4和php7结合编译安装,并安裝PDOmysql扩展

    1.编译安装apache2.4.20 第一步: ./configure --prefix=/usr/local/httpd --enable-so 第二步: make 第三步: sudo make i ...

  8. C#加密算法汇总(转载)http://www.cnblogs.com/zengxiangzhan/archive/2010/01/30/1659687.html

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 方法一:     //须添加对System.Web的引用    ...

  9. The Story of self Parameter in Python, Demystified

      转自:http://www.programiz.com/article/python-self-why If you have been programming in Python (in obj ...

  10. mysqldump 失败

    背景交代 mysql版本:mysql Ver 14.14 Distrib 5.7.11, for Linux (x86_64) using EditLine wrapper os:Linux vers ...