iphone input 输入框设置 readonly 依然出现光标、点击 input 依然出现虚拟键盘问题

0
发布于 (更新时间： by 博主

处理 input 输入框时，搞移动端开发必然会遇到一些坑，如虚拟键盘被遮挡、虚拟键盘显示异常等、使用 fixed 布局失效等问题。本次提一个在使用 input 输入框结合做选择器组件时会遇到的一个坑，背景是点击输入框弹出一个时间、地址选择器。在 iphone 下 input 输入框设置了 readonly 依然出现光标、点击 input 依然会先出现虚拟键盘，导致交互不太友好。

解决方案：

input 输入框设置 readonly 依然出现光标的解决方案：加上样式：-webkit-user-select :none 即可，如下：

input:read-only {
  -webkit-user-select :none
}

点击 input 依然出现虚拟键盘的解决方案:尝试让获取焦点的元素失去焦点，document.activeElement.blur();，如下：

if(navigator.userAgent.match(/iPhone/i)) {
  $('#myInput').click(function () {
    document.activeElement.blur();
  });
}

参考引用：
https://blog.csdn.net/weifenwang/article/details/75222544
https://www.cnblogs.com/shisufei/p/6909450.html

浏览次数: 2,803