最近也偷懒,很久没有写博客了。今天在项目中遇到了这个奇葩的问题,基于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. 贪心算法(2)-Kruskal最小生成树

    什么是最小生成树? 生成树是相对图来说的,一个图的生成树是一个树并把图的所有顶点连接在一起.一个图可以有许多不同的生成树.一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n ...

  2. Web开发接口测试工具——Postman插件的使用(chrome浏览器)

    Postman是chrome浏览器的一款插件.Postman 可以模拟 http 请求的发送,并自动解析 JSON 和 XML 的返回数据. 可以手动的去配置各类 parameter,还支持 Basi ...

  3. PHP对大文件的处理思路

    需求: 现有一个1G左右的日志文件,大约有500多万行, 用php返回最后几行的内容. 在php中,对于文件的读取时,最快捷的方式莫过于使用一些诸如file.file_get_contents之类的函 ...

  4. Linux下*.tar.bz2等文件如何解压--转

    如果tar不支持j这个参数就先用 bzip2 -d xxx.tar.bz2 把它解压成.tar文件,然后再用 tar xvf xxx.tar 拆包.压缩解压 linux下怎么解后缀名是gzip的文件? ...

  5. VBoxGuestAdditions下载地址

    http://dlc.sun.com.edgesuite.net/virtualbox/

  6. XGPush集成(信鸽集成)

    #import "AppDelegate.h" #import "XGPush.h" #import "XGSetting.h" #defi ...

  7. Socket的使用

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOException; import jav ...

  8. Codeforces Round #190 (Div. 2) 水果俩水题

    后天考试,今天做题,我真佩服自己... 这次又只A俩水题... orz各路神犇... 话说这次模拟题挺多... 半个多小时把前面俩水题做完,然后卡C,和往常一样,题目看懂做不出来... A: 算是模拟 ...

  9. js判断图片上传时的文件大小,和宽高尺寸

    今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...

  10. Android Studio 复制粘贴图片到drawable文件夹没有效果 - 解决方法

    我想放一些图片到drawable文件夹里面,但是简单的复制文件,粘贴文件,或者拖拽文件,都不起作用.不知道为什么,之前是可以的,突然就不行了. 解决方案 在drawable文件夹的目录上右键,选择Re ...