例子:
<!DOCTYPE html>
<title>Test</title>
<body style="position: relative; overflow: hidden;">
<input type="text" style="position: absolute; top: 420px;">
</body>
请看下面的图像序列,从左到右:
页面刚加载。
重点输入字段。它被虚拟键盘遮挡了。
只有在用户开始输入时,输入字段才会可见。
删除 overflow: hidden
使输入字段在焦点处可见,我认为这对用户更友好。
有没有办法为正文指定 overflow hidden ,而不是让虚拟键盘遮挡焦点输入字段?
最佳答案
我通过动画解决了屏幕键盘和滚动页面的模糊输入问题
var headerHeight = $("header").outerHeight(true);
$(document).on('focus', 'input:not([name=option]),select,textarea', function (e) {
$("html").animate({ scrollTop: $(e.target).offset().top - (headerHeight + 30) }, 500);
});
你也可以使用这些功能
关于html - 焦点输入字段被虚拟键盘遮挡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41087521/