最近也偷懒,很久没有写博客了。今天在项目中遇到了这个奇葩的问题,基于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. The internals of Python string interning

    JUNE 28TH, 2014Tweet This article describes how Python string interning works in CPython 2.7.7. A fe ...

  2. css笔记07:通配符选择器

    通配符选择器: * { margin:10px ;//默认四个位置参数全为零 margin-top:10px;//分别设置四个参数 margin-left:10px; margin-right:0px ...

  3. DataTables warning (table id = 'myTable'): Requested unknown parameter '0' from the data source for row 0

    第一种方式:不用在js里设置列Html: <table id="myTable"> <thead> <tr> <th>Title-1 ...

  4. Linux文件与目录管理之ls的使用

    来源:鸟哥的私房菜 查看文件与目录 ls ls [-aAdfFhilnrRSt] 目录名 ls [--color={never,auto,always}] ls [--full-time] 目录名 选 ...

  5. Active Session History (ASH) Performed An Emergency Flush Messages In The Alert Log

    Active Session History (ASH) Performed An Emergency Flush Messages In The Alert Log (文档 ID 1385872.1 ...

  6. CENTOS WDCP 安装及安全设置教程

    1.WDCP 安装 源码安装 (ssh登录服务器,执行如下操作即可,需root用户身份安装) wget  http://dl.wdlinux.cn:5180/lanmp_laster.tar.gz t ...

  7. ionic获取事件中的对象

    ng-click="submit1($event, 'argsTest’)" $scope.submit1=function(event, args){ var target = ...

  8. Scala的基本语法总结

    Scala的函数: 目前博客园中的代码编辑器中还不支持Scala语言....用的Java代码的存储方式 object TestScala { def main(args: Array[String]) ...

  9. SSH整合_struts.xml 模板

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...

  10. windows下nginx+fastcgi不能使用file_get_contents/curl/fopen的原因

    这两天一直在搞windows下nginx+fastcgi的file_get_contents请求.我想,很多同学都遇到当file_get_contents请求外网的http/https的php文件时毫 ...