最近也偷懒,很久没有写博客了。今天在项目中遇到了这个奇葩的问题,基于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. 隐藏gvim中的工具栏和菜单栏

    在vim的配置文件.vimrc中添加如下代码: "Toggle Menu and Toolbar set guioptions-=m set guioptions-=T map <si ...

  2. PAT 1001

    Calculate a + b and output the sum in standard format -- that is, the digits must be separated into ...

  3. php中常用设置

    设置SESSION的生命周期 今天我所要想解决的问题,简单来说,就是设置SESSION的生命周期问题,其实问题是很简单了,只是不知道为什么,我用session_cache_expire(12*60); ...

  4. MSSQL系统表常用操作

    1:获取当前数据库中的所有用户表 select Name from sysobjects where xtype='u' and status>=0 2:获取某一个表的所有字段 select n ...

  5. python(1) - 条件判断和循环

    条件判断: 比如输入用户年龄,根据年龄打印不同的内容,在python中用if语句实现: age = 20 if age >= 18: print('你可以看这个视频!') 可以给if加一个els ...

  6. Java之MS SQL数据库连接

    一  1.首先,到微软官方下载jdbc驱动包 Microsoft JDBC Driver 4.0 for SQL Server 2.运行sqljdbc_4.0.2206.100_chs.exe,把文件 ...

  7. css实现居中

    --在html常常用到居中 --1.可以用<center></center> --2.可以用css 演示代码: <!DOCTYPE html PUBLIC "- ...

  8. Linux系统上安装软件(JDK以及tomcat服务器)

    一:安装jdk linux系统上面如果运行java程序,就需要安装java的运行环境(jdk) 1:下载linux版本的jdk 地址:http://www.oracle.com/technetwork ...

  9. 修改Linux网卡由eth1变成eth0

    正常来说,Linux在识别网卡时第一张会是eth0,第二张才是eth1.有时候我们使用虚拟机克隆技术后网卡的信息就会改变,新克隆出来的虚拟主机网卡名字可能变为eth1.无论我们怎么修改都无法改变,这就 ...

  10. C#控制台程序 使用 Server.MapPath,

    (1)添加引用 System.Web. (2)在类中填写 using System.Web 命名空间. (3)写法为: System.Web.HttpContext.Current.Server.Ma ...