如何关注上边界的输入 [英] How to focus on input with top margin

问题描述

我正在进行表单验证，并且当用户没有填写其中一个必填字段时，我希望页面的位置专注于该输入，但我不希望输入字段直接到达浏览器框架的顶部，想要留下一些空间，以便输入表单的标题也可以看到。

这是如何使用 focus（）只有

但我想要这样：

b / b>

这个想法是继续将输入字段的输入游标集中在一起。

编辑：如果可以使用动画焦点，那就太棒了。有没有什么建议，如何做到这一点？

解决方案

使用jQuery的一种方法：滚动窗口到标签的垂直偏移量。

$ $ $ $ $（$）$（$）$（$） ）.top）;
$（input）。focus（）;
}）;

或者使用一些额外的边距滚动到输入元素：

  $（function（）{
 $（window）.scrollTop（$（input）。offset（）。top  -  100）; 
 $（input）。focus（）; 
}）; 
  

（注意：用适当的选择器替换input和label） b $ b

I am making form validation and when user doesn't fill one of required fields I want position of the page to focus on that input but I don't want input field to be directly to the top of the browser frame, I want to leave some space between so that title of input form can also be seen.

This is how it looks with focus() only

but I want it like this:

The idea is to keep typing cursor focused on input field.

EDIT: If it's possible to use animated focus that would be awesome. Are there any suggestions how to do that?

解决方案

One way using jQuery: scroll the window to the vertical offset of the label.

$(function(){
    $(window).scrollTop($("label").offset().top);
    $("input").focus();
});

Or scroll to the input element with some additional margin:

$(function(){
    $(window).scrollTop($("input").offset().top - 100);
    $("input").focus();
});

(Note: replace "input" and "label" with the proper selector)

这篇关于如何关注上边界的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！