之前在联调时遇到了ios系统中input框禁用时,文本内容不显示的问题。在查询相关资料后发现ios系统默认disabled属性时透明度为0.3,这就导致了在视觉效果上文本不显示,解决方法如下:
1、设置透明度和填充色

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

2、不用disabled,用readonly属性
该属性在使用时会出现bug,不能编辑但是会出现光标,解决该问题有以下几个方法:
(1)使用js使其在聚焦事件中失焦

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

(2)使用css(只读表单元素的所有事件无法生效)

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

disabled和readonly都是禁用,不同之处在表单提交的时候,使用disabled的数据无法提交,而使用readonly属性的数据可以提交。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐