如果给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;
}
这个是我感觉比较适合我的,因此最后我采纳了该方案,当然也是有弊端的,绑定在只读表单元素的所有事件将无法生效。除此之外都表现完美。