首页 > 代码库 > 关于sifari兼容性的一个问题

关于sifari兼容性的一个问题

2024-08-13 20:11:57   265人阅读

输入框 一个很基础的控件 结果出现了兼容性问题 在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;
 } 

 

关于sifari兼容性的一个问题


联系
我们