モバイル側の互換性の問題(5)
1098 ワード
長い間総括していませんが、引き続き発表していくつかの互換性の問題に遭遇して、コミュニケーションを歓迎します.
iosキーボード入力後、ページがずれ、ページ応答領域がクリックできない
入力操作を行うと、図領域のようにクリックできません.
解決策
20191016補足:通常のドキュメント・フローでは、アップロード・メソッドを使用するか、次の方法に変更できます.
ドキュメント・フローから離れるには、次の方法を使用します.
位置を記録して手動で変換すればよい.
理由:
iosでは、inputがfixedの位置決めの下にある場合、この問題が発生します.webkit問題アドレスは、問題の説明に従って親要素がfixedの下にない場合は回避できます.
https://hackernoon.com/how-to...
iosの下で入力する推奨文字はchangeまたはinputイベントをトリガーできません.
解決方法:入力ボックスの
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
イベントで一度データを取得し、データ取得できない問題を解決します.