【Webフロントエンド】移動端H 5の開発で遭遇したピット

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要素を避ける必要がある場合は、もう1つnotを追加します
しょうてん

フォーカスを失うのはos行為であり、ブラウザ制御ではないため、現在の入力ボックスにフォーカスがあることを実現するには、他の要素をクリックした後にフォーカスを失うことなく、クリックイベントを自分で処理して入力ボックスに再びフォーカスを取得させることでこの効果を実現することができる

.

focusとblurの2つのイベントはバブルをサポートしません(ただしキャプチャをサポートします)、バブルをサポートするイベントはfocusinとfocusoutで、イベントの発生順序:focusin->focus->focusout->blur

tabindexプロパティを設定することで、元のフォーカスを取得できない要素がフォーカス

を取得できるようにすることができる.
仮想キーボード

入力パネルの外部をクリックするときに仮想キーボードを収納し、フォーカスで解決するのが面倒な場合(パネルに入力ボックスだけでなく他の要素がある場合)は、パネル上の1階のコンテナにクリック処理イベント(vueなら@touchstart.capture)を追加し、イベント処理コードで判断することができます.クリックされた要素がパネル上の要素なのかパネル外の要素なのかを決定し、パネルが

を隠すかどうかを決定する.
クリック

クリックとダブルクリックを判別するために、touchendイベント300 ms後には他の操作がなく、clickイベントが発生し、clickイベントはタッチイベントの終了を示す.したがって、クリックによってフローティングレイヤが消失するというシーンは、注意しないとクリックスルーが発生しやすく、すなわちフローティングレイヤがtouchendを使用して自分を消失させるが、フローティングレイヤの下のクリック位置にはちょうど要素がclickイベントをバインドしているので、その要素のclickイベントがトリガーされ、クリックスルーが発生する.フローティングレイヤがclickイベントを使用するか、フローティングレイヤのtouchendがpreventDefaultでclickを無視します.

animation

animation-delayは、アニメーションの初回起動時のみ遅延しますが、ループアニメーションであれば、次回からはこの遅延はありません.

アニメーションの再生を制御するには、animationを1つのclassに設定し、アニメーションを再再生する必要がある場合は、まずこのclassを削除してからこのclassを追加すればよいのですが、ここでは単純にこの2つのステップを一緒に置くだけでブラウザに最適化される可能性があることに注意してください.次の3つの方法があります

削除後強制ブラウザ再描画

追加

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);