最近也偷懒,很久没有写博客了。今天在项目中遇到了这个奇葩的问题,基于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. apache配置文件

    httpd-vhost.conf文件中: <VirtualHost *:80>    ServerAdmin webmaster@dummy-host2.example.com    Do ...

  2. centos 配置NFS服务器

    转载:http://boloveyo.blog.163.com/blog/static/203926187201232383956558/ 系统是CentOS5.6,假设NFS Server IP为1 ...

  3. css预处理的引入与问题

    css的预处理越来越流行.sass,less,stylus这几个都使用方便. 我想使用他的原因,暂时最主要是为了@import的功能.现在的问题:因为产品太多,是个页面,有10个css.而这10个cs ...

  4. ArcGis:vs c#编程遇到问题The specified filename is invalid

    出现这个问题总归一点那就是你没有添加一个控件axLicenseControl这个控件导致报这个错误

  5. CSS: Float a div on another div, Ex: Text caption on picture

    <style type="text/css"> .figure { width: 316px; height: 205px; display: block; borde ...

  6. linux - 文件查找及压缩

    文件查找: 1.  which    查找可以执行文件,只搜索$PATH里的目录 $ which ls /bin/ls which只搜索$PATH里的目录,如果搜索当前目录的文件是没有任何结果的 $ ...

  7. ACM一道关于素数查找的题

    在ACM做这么一道题: 我用了最简单的查找素数的方法: bool isPrime(int n) { int t=n-1; while(t>2) { if(n%t==0) { return fal ...

  8. Shell学习笔记 - 运算符

    一.Declare命令 1. 命令格式 declare [+/-] [选项] 变量名 其中: -: 给变量设定类型属性 +:取消变量的类型属性 2. 参数说明 -i:将变量声明为整型 -a:将变量声明 ...

  9. Gnome下Gvim菜单无法显示的解决办法

    前些日子从Xfce转向了Elementary OS,安装Gvim后发现菜单无法显示,现在找到了解决的办法. 编辑文件  -/.gnome2/vim [Placement] Dock=Toolbar\\ ...

  10. linux两种增加交换分区(swap)的方法

    在安装Oracle后,为使Oracle流畅运行,需要手动增加linux的交换分区(相当于Windows下的虚拟内存)的大小,本文介绍两种增加交换分区(swap)的方法. 第一种方法:新建分区 1.fd ...