モバイル側の互換性の問題(5)

1098 ワード

長い間総括していませんが、引き続き発表していくつかの互換性の問題に遭遇して、コミュニケーションを歓迎します.
iosキーボード入力後、ページがずれ、ページ応答領域がクリックできない
入力操作を行うと、図領域のようにクリックできません.
解決策
if (/(iPhone|iPad|iPod|iOS)/i.test(window.navigator.userAgent)) {
      document.activeElement.scrollIntoViewIfNeeded(true)
    }

20191016補足:通常のドキュメント・フローでは、アップロード・メソッドを使用するか、次の方法に変更できます.
if(isIOS()) {
    document.activeElement.scrollIntoView(false)
}

ドキュメント・フローから離れるには、次の方法を使用します.
let scrollY = 0
const handleBlur = function() {
    window.scrollTo(0, scrollY)
}

const handleFocus = function() {
    scrollY = window.scrollY
}
document.querySelector('input').addEventListener('blur', handleBlur)
document.querySelector('input').addEventListener('focus', handleFocus)

位置を記録して手動で変換すればよい.
理由:
iosでは、inputがfixedの位置決めの下にある場合、この問題が発生します.webkit問題アドレスは、問題の説明に従って親要素がfixedの下にない場合は回避できます.
https://hackernoon.com/how-to...
iosの下で入力する推奨文字はchangeまたはinputイベントをトリガーできません.
解決方法:入力ボックスのonblurイベントで一度データを取得し、データ取得できない問題を解決します.