关于input的disabled属性在移动端兼容问题

如果给input添加disabled属性，IOS会检测到disabled属性，给输入框的默认字体设置上灰色和透明度，导致在IOS端 placeholder和输入的文本都呈现灰色，与安卓端表现不一致，安卓端没有这个问题。

我使用的是Vant中的Field输入框，找到的第一个方法：

input[disabled],input:disabled,input.disabled{  
    color: #bbb;  
    opacity: 1;  
    -webkit-text-fill-color:#bbb;  
    -webkit-opacity:1;  
} 

但是这个方法还是没能解决这个兼容问题，随后我又找到第二个方法：不使用disabled，改用readonly，但这种方法会额外出现光标，解决方法如下：

方案一（JS）：

<input type="text" value="test" onfocus="this.blur()" readonly="readonly">

这个方法就是聚焦的时候自动失焦。但缺点是：一方面是js处理没有css好，另一方面是如果需要在该元素上绑定其他事件，其他人开发不留意可能会造成事件覆盖。

方案二（CSS）：

[readonly="readonly"] {
  user-select: none;
}

这是个新的实验性属性，具体说明及兼容性可参考user-select MDN
用起来感觉很好，但是同样有两个问题：一，非标准属性（请尽量不要在生产环境中使用它！）；二，如果用户想要复制该表单内容就不行了，这个问题个人感觉很严重！

方案三（CSS）：

[readonly="readonly"] {
  pointer-events: none;
}

这个是我感觉比较适合我的，因此最后我采纳了该方案，当然也是有弊端的，绑定在只读表单元素的所有事件将无法生效。除此之外都表现完美。