弹出键盘时，将焦点集中在移动设备上的输入元素

Question

当用户单击输入字段并弹出键盘时，我想滚动页面/表单以聚焦，以便在当前视图中显示该输入字段。

我正在尝试这两种解决方案，但没有一种有效：

$('input[type="text"]').on('focus', function() {
document.body.scrollTop += this.getBoundingClientRect().top - 10
});

和

$('input[type="text"]').blur(function() {
$(window).scrollTop(0,0);
});

我该怎么做？为什么这些都不起作用？

Answer 1

.scrollTop(( 是一个方法，只接受一个值。

你的第一个例子是错误的，因为你不能使用 += 来添加它。您需要向它传递一个垂直值，例如 .scrollTop(0(。

你的第二个例子是错误的，因为你给它两个值。我认为你对.scrollTo(0,0(而不是scrollTop((感到困惑。

https://api.jquery.com/scrollTop/

示例(未测试(：

$('input[type="text"]').on('focus', function() {
$(window).scrollTop(this.getBoundingClientRect().top - 10);
});