使用虚拟键盘的 Mobile Safari 中的错误固定元素
处理 Mobile Safari 中的固定元素可能是一项挑战,尤其是在使用虚拟键盘时被打开。当导航中的输入字段获得焦点时,固定导航元素意外跳转时会出现一个常见问题。
原因和解决方案
此行为可能是由于已知的移动 Safari 中的问题。建议的解决方案涉及动态更改固定元素的位置。
- 当输入元素获得焦点并且出现虚拟键盘时,将固定元素的位置属性切换为绝对位置。
- 一旦输入元素失去焦点并且键盘隐藏,恢复原始固定位置。
代码片段
以下代码片段演示了此解决方案:
1 2 3 4 5 6 7 8 9 10 | .header {
position: fixed;
}
.footer {
position: fixed;
}
.fixfixed .header,
.fixfixed .footer {
position: absolute;
}
|
登录后复制
1 2 3 4 5 6 7 8 9 10 11 12 13 | if ( 'ontouchstart' in window) {
var $body = $( 'body' );
$(document)
.on( 'focus' , 'input' , function () {
$body .addClass( 'fixfixed' );
})
.on( 'blur' , 'input' , function () {
$body .removeClass( 'fixfixed' );
});
}
|
登录后复制
通过添加此代码,即使用户与输入字段交互并且出现虚拟键盘,导航元素也将保持固定在页面底部。
以上是如何使用虚拟键盘防止移动 Safari 中固定元素跳转?的详细内容。更多信息请关注PHP中文网其他相关文章!