今天我们分享一个IOS的bug，问题原因：在form表单输入框input里输入的时候，没反应，输入文字也没显示，的确很奇葩。当然在安卓里面是没问题的。我们先来看张图，这张图是在项目中的截图，如下：

分析原因

大家可以看到，这是一个很简单的表单，也没用什么插件，简单了写了些判断而已。

项目做完后，在PC端是没问题的，并且用PC浏览器模拟移动端的检测也是可以了。

但是就IOS真机测试问题就来了，导致了上图的问题，只有最后一个输入框能输入。

在一顿操作后，发现是输入框属性出现了问题，我们在CSS中设置通用样式的时候，设置了：

a,button,input {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  /* -webkit-user-select: none; */
  outline: 0;
}

-webkit-user-select: none 这个属性。大家可能对于user-select不太熟悉，小编先简单介绍下。

user-select介绍

user-select 属性规定是否能选取元素的文本。

在 web 浏览器中，如果您在文本上双击，文本会被选取或高亮显示。此属性用于阻止这种行为。

| 默认值： | auto | | 继承： | 否 | | 动画制作： | 不支持。 | | 版本： | CSS3 | | JavaScript 语法： | object.style.userSelect="none" | |----------------|--------------------------------|

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

跟随 -webkit-、-ms- 或 -moz- 的数字规定使用前缀的首个版本。

| 属性 | Chrome | IE | Firefox | Safari | Opera | |-------------|-------------------|----------------|----------------|--------------|--------------------| | user-select | 54.0 6.0 -webkit- | 79.0 10.0 -ms- | 69.0 2.0 -moz- | 3.1 -webkit- | 41.0 15.0 -webkit- |

CSS 语法

user-select: auto|none|text|all;

属性值

| 值 | 描述 | |------|---------------------| | auto | 默认。如果浏览器允许，则可以选择文本。 | | none | 防止文本选取。 | | text | 文本可被用户选取。 | | all | 单击选取文本，而不是双击。 |

实例

防止选取 <div> 元素的文本：

div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

解决方案

从上面的知识点，我们可以看出user-select是防止选取的用途，但是在IOS里面，就出现问题；当你设置为none的时候，就会造成我们刚开始说的问题。所以我们应该改下设置了，如下：

a,button,input {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  /* -webkit-user-select: none; */
  outline: 0;
}

注释掉-webkit-user-select: none，或者你可以改成-webkit-user-select: auto，都可以。

那有童鞋问了，为什么最后一个你没改之前，又可以输入？哈哈，因为最后一个是textarea标签，我们没设置通用的user-select属性，所以不会被禁止输入哦！

总结

在项目开发过程中，往往一个很小的问题，会让你折腾半天或者更长时间，所以我们需要多看、多读，多积累这些基础知识点，才能在后面开发项目的时候，少碰壁。

希望本次分享能够帮助到大家，如果有问题，可以留言沟通。