苹果手机不能输入input/textarea的解决方案

本文介绍苹果手机不能输入input textarea的解决方案，原因是-webkit-user-select: none; 导致的，只要将这个注销掉就可以了，详情看文章内容吧。

下面来说说苹果手机不能输入input/textarea的解决方案。

在CSS中添加下面的代码就可以了

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

*:not(input,textarea) { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
}

这几行代码的意思：

-webkit-tap-highlight-color

这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。
 
-webkit-touch-callout

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
 
user-select

(1) 语法
user-select:none | text | all | element
默认值：text
适用范围：除替换元素外的所有元素
(2) 取值说明
none:文本不能被选择
text:可以选择文本
all：当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素，那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。
Element:可以选择文本，但选择范围受元素边界的约束