ios 移动端 focus 无效，input 设置 readon
2019-12-17 本文已影响0人
五十岚色叶
日期：2019年 12 月 17 日
ios 移动端 focus 无效
问题分析
focus() 是 jQuery 的一个方法，调用这个方法可以触发 focus 事件，用来为元素赋予焦点，但是只在 PC 端的浏览器上有效，在移动端就会失效或者效果不好
问题解决
- 使用 HTML 5 的新属性 autofocus 可以使元素自动聚焦
- 通过为元素添加其他用户交互事件来触发 focus，比如在 touchStart 事件下触发 focus
input 设置 readonly 之后点击仍然弹出软键盘
问题分析
这是因为把 <input> 标签设置了 readonly 属性之后，表示这个表单元素不能编辑，但是，鼠标点击之后，这个表单元素还是有光标存在的，也就是仍然可以聚焦，所以键盘还是会弹出来，我们可以在<input> 中添加 unselectable=“on” οnfοcus=“this.blur()” 来取消光标的出现，使输入框获取不到焦点，就不会弹出键盘
问题解决
<input placeholder="请选择" unselectable="on" onfocus="this.blur()" readonly >
