ios 移动端 focus 无效,input 设置 readonly 之后点击仍然弹出软键盘

日期: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 >
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容