【Web前端】移动端H5开发遇到的一些坑

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即可，但是这里要注意，如果只是单纯的把这两个步骤放在一起，可能会被浏览器优化掉，所以可以用下面的三个方法：
  1. 移除后强制浏览器重绘再添加

element remove class;
void element.offsetWidth; // 触发reflow
add class;

2. 移除后和添加之间有时间间隔

element remove class;
setTimeOut(element add class, 100);

3. 在setTimeout中执行，浏览器不会优化

setTimeout(() => {
        element remove calss;
        element add class;
}, 100);