移動端-webkit-user-select:none導致input/textarea輸入框無法輸入

這個問題，也算是個大坑了。

最開始的開始，是因為我們在做大裝盤活動的時候，發現在ios上面出現了這樣的問題：點擊“轉”按鈕，ios上面會有延遲並且會出現圖片的陰影，這個肯定就不好看了撒，然后，找吧，改吧。

 

對於延遲問題，使用以下方法解決：

FastClick消除點擊延時提高程序的運行效率
引入插件的javascript文件到你的HTML網頁中，像這樣：
<script type='application/javascript' src='fastclick.js'></script>
 
注意：type屬性在HTML5網頁中可以省略不寫。
腳本必須加載到實例化fastclick在頁面的任何元素之前。
實例化 fastclick 最好在body元素的前面
 
$(function(){
//fastclick用於消除在移動瀏覽器上觸發click事件與一個物理Tap(敲擊)之間的300s延遲
FastClick.attach(document.body);
});

附加： 解決移動端點透問題方法：

　　1. 眾所周知，zepto的tap事件是有點透問題的，但是最新版的zepto已經修復了這個問題。

　　2. 在zepto修復問題之前，有fastclick、hammer等通用庫可以使用。

　　其中最常使用的還是fastclick，地址 ：https://github.com/ftlabs/fastclick

對於點透問題，參考這位同學寫的博客，寫的很好：web移動前端的click點透問題

圖片陰影的問題，找了好久，終於找到了解決辦法：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    // 后面的幾行是新加的
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    outline: none;
}

好啦，大功告成。結果第二天來上班，又出現了問題，說的是所有的input框在ios上面都無法輸入了，這個時候，我慌了。仔細回想，頭天代碼都沒動，只是改了這個，好吧，又開始網上各種查各種找。

終於找到原因啦。。。。

就是-webkit-user-select: none;導致的！！！

經過查閱，網上有提供一種好的解決辦法：

* {
    -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:可以選擇文本，但選擇范圍受元素邊界的約束