关于sifari兼容性的一个问题

时间:2024-10-26 22:04:38

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