IOS-safari-无法实现input自动focus
IOS safari下,无法实现input
、textarea
、contenteditable = true
等元素的autofocus(触发这些元素的click事件来达到focus也是行不通的),这是一个IOS的「安全功能」而不是「bug」
IOS safari在编程触发focus时,会检查调用栈,如果当前栈元素的的下一个元素,是用户触发的调用,那么focs起作用,否则不起任何作用
实验如下:
<input type="text" autofocus class="input">
<!-- input/textarea/contenteditable="true" 等可以focus的元素都是一样的,不支持autofocus -->
<!-- <div contenteditable="true" class="input"></div> -->
<!-- <textarea class="input"></textarea> -->
<button class="button">点击focus</button>
<script>
document.addEventListener('DOMContentLoaded', function () {
const input = document.querySelector('.input')
// input.focus() // 直接focus不起作用
// 新建一个btn,编程方式触发其click,然后触发focus也不行
// const btn = document.createElement('button')
// btn.onclick = function () {
// console.log('btn\'s click')
// input.focus()
// }
// btn.click()
// 只有用户触发的事件才能focus
const button = document.querySelector('.button')
button.onclick = function () {
console.log('button click ...')
// 起作用,下一个栈元素是onclick,这个调用是用户触发的
input.focus()
// 不起作用,下一个调用站是setTimeout,这个调用是编程方式触发的
// setTimeout(() => {
// input.focus()
// })
}
})
</script>
参考:
- https://juejin.im/entry/59e5b5246fb9a0450406f1e1
- https://stackoverflow.com/questions/6287478/mobile-safari-autofocus-text-field
- http://www.cnblogs.com/shuiyi/p/5419585.html
在UIWebview下可以设置keyboardDisplayRequiresUserAction
为NO
,禁用掉这个限制,所以Hybrid App
中嵌入的网页可以实现autofocus
2018-05-30
相关文章
- 硅谷互联网公司的开发流程
开发流程包括这么几个阶段: OKR 的设立; 主项目及其子项目的确立; 每个子项目的生命周期; 主项目的生命周期; 收尾、维护、复盘。 第一点,OKR 的设立 所有项目的起始,都应该从 Ro
- RESTful-表述性状态转移风格
REST英文全拼:Representational State Transfer 面向资源编程 资源指的就是一类数据 产品表->就是产品资源 最重要的是如何表示一个资源 地址即
- 稳定性思考
产品功能线 0-1: 当系统从无到有的时候,首要考虑的是研发效率,功能快速迭代,满足快速增长的业务需求 1-10 系统已经搭建起来,此时考虑的是系统的稳定性。 可用性:1.隔离:区分出核心和非核心功能
- Supervisor守护队列发邮件
安装 CentOS: yum -y install supervisor Debien/Ubuntu适用:apt-get install supervisor 配置 修改主配置文件:vim /et
- 安装libsodium,让服务器支持chacha20等加密方式
用chacha20加密方式需要安装libsodium 注意:libsodium从1.0.15开始就废弃了aes-128-ctr yum install wget m2crypto git libsod
随机推荐
- 硅谷互联网公司的开发流程
开发流程包括这么几个阶段: OKR 的设立; 主项目及其子项目的确立; 每个子项目的生命周期; 主项目的生命周期; 收尾、维护、复盘。 第一点,OKR 的设立 所有项目的起始,都应该从 Ro
- RESTful-表述性状态转移风格
REST英文全拼:Representational State Transfer 面向资源编程 资源指的就是一类数据 产品表->就是产品资源 最重要的是如何表示一个资源 地址即
- 稳定性思考
产品功能线 0-1: 当系统从无到有的时候,首要考虑的是研发效率,功能快速迭代,满足快速增长的业务需求 1-10 系统已经搭建起来,此时考虑的是系统的稳定性。 可用性:1.隔离:区分出核心和非核心功能
- Supervisor守护队列发邮件
安装 CentOS: yum -y install supervisor Debien/Ubuntu适用:apt-get install supervisor 配置 修改主配置文件:vim /et
- 安装libsodium,让服务器支持chacha20等加密方式
用chacha20加密方式需要安装libsodium 注意:libsodium从1.0.15开始就废弃了aes-128-ctr yum install wget m2crypto git libsod