输入框 一个很基础的控件 结果出现了兼容性问题 在chrome ie android上页面正常 结果在Safari和IOS系统里面输入框无法输入,
点击后边框有高亮效果但是无法输入文本,问题代码如下:
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
<style type="text/css"> | |
*{ | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
</style> | |
</head> | |
<body> | |
<input type="text" placeholder="账号"> | |
</body> | |
</html> |
查询资料:
大部分情况下,使用这个属性的目的是为了界面的美化,
因为手机端很容易因为用户长按屏幕出现文本选择框,
很丑,影响用户体验,所以在没有 复制黏贴这种需求的
页面里,一般会使用这个属性禁止用户选择。
解决方法有三种:
1.注释掉-webkit-user-select: none;这行代码
2.通过JS实现界面的美化
3.重新声明:
input { | |
-webkit-user-select: auto !important; | |
} |