textarea
- textarea的底部始終會和它的父元素有一個間距，通過設置vertical-align: middle即可消除
- textarea的高度自適應解決方案，如果需要控制最大高度，那么在class里設置max-height即可
禁止長按出菜單
// 這個css只能對ios設備起作用
*:not(input):not(textarea) {
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
// 對android設備還需要在body或頂層元素綁定h5引入的contextmenu事件
window.document.body.addEventListener('contextment', function(e) {
e.preventDefault();
});
由于用了*選擇子，所以a元素也是在內的，這點要注意，如果需要避開a元素的話，就要再加一個not
焦點
- 由于失焦是os行為，并不是瀏覽器控制的，所以想要實現當前輸入框擁有焦點，在點擊了其他元素后不失焦是不行的，只能是自行處理點擊事件讓輸入框再次獲取焦點這樣來實現這個效果
- focus和blur這2種事件不支持冒泡（但支持捕獲），支持冒泡的事件是focusin和focusout，事件發生順序：focusin -> focus -> focusout -> blur
- 可以設置tabindex屬性讓原生不可獲取焦點的元素能獲取焦點
虛擬鍵盤
- 有時候需要在輸入面板外部點擊的時候收起虛擬鍵盤，通過焦點來解決比較麻煩（面板上不止輸入框還有其他元素的時候），可以在面板上一層的容器里添加點擊處理事件（vue的話就是@touchstart.capture），并在事件處理代碼中判斷，被點擊的元素是面板上的元素還是面板外的元素，從而決定面板是否要隱藏
點擊
- 為了辨別單擊和雙擊，touchend事件300ms后沒有其他操作，才會產生click事件，click事件標志著一輪觸摸事件的結束。所以點擊觸發浮層消失的這種場景，如果沒留意，容易發生點擊穿透的情況，即浮層使用touchend使自己消失，但浮層之下的點擊位置剛好有元素綁定click事件，這樣就會觸發該元素的click事件，產生點擊穿透。要么就是浮層使用click事件，要么就是浮層的touchend用preventDefault把click給忽略掉。
animation
- animation-delay是只在動畫的初次啟動時才會延遲，如果是循環的動畫，那么下次開始并不會有這個延遲
- 想要控制動畫的重新播放，可以通過把animation設置放到一個class里，然后需要重新播放動畫的時候，先移除這個class，然后再添加這個class即可，但是這里要注意，如果只是單純的把這兩個步驟放在一起，可能會被瀏覽器優化掉，所以可以用下面的三個方法：
- 移除后強制瀏覽器重繪再添加
element remove class;
void element.offsetWidth; // 觸發reflow
add class;
- 移除后和添加之間有時間間隔
element remove class;
setTimeOut(element add class, 100);
- 在setTimeout中執行，瀏覽器不會優化
setTimeout(() => {
element remove calss;
element add class;
}, 100);
