ios 移动端 focus 无效，input 设置 readon

日期：2019年 12 月 17 日

ios 移动端 focus 无效

问题分析

focus() 是 jQuery 的一个方法，调用这个方法可以触发 focus 事件，用来为元素赋予焦点，但是只在 PC 端的浏览器上有效，在移动端就会失效或者效果不好

问题解决

1. 使用 HTML 5 的新属性 autofocus 可以使元素自动聚焦
2. 通过为元素添加其他用户交互事件来触发 focus，比如在 touchStart 事件下触发 focus

input 设置 readonly 之后点击仍然弹出软键盘

问题分析

这是因为把 <input> 标签设置了 readonly 属性之后，表示这个表单元素不能编辑，但是，鼠标点击之后，这个表单元素还是有光标存在的，也就是仍然可以聚焦，所以键盘还是会弹出来，我们可以在<input> 中添加 unselectable=“on” οnfοcus=“this.blur()” 来取消光标的出现，使输入框获取不到焦点，就不会弹出键盘

问题解决

<input placeholder="请选择" unselectable="on" onfocus="this.blur()"  readonly >