如何专注于高利润率的投入

Question

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

这就是focus()的唯一身份

但我想要这样：

我们的想法是将光标重点放在输入字段上。

编辑：如果可以使用非常棒的动画焦点。有什么建议怎么做？

Answer 1

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

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

或滚动到带有一些额外边距的输入元素：

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

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

Answer 2

我们假设您要确保标签标签也可见......

$.fn.smoothFocus = function(offset) {
   //Find the label first:
   var $labels = $(this).parent().filter("label");

   if ($(this).attr('id'))
       //Find labels that have a for= attributes.
       $labels.add("label[for=" + $(this).attr("id") +"]");

   //Find the top most label:
   var top = $(this).offset().top;
   $labels.each(function() {
       var currentTop = $(this).offset().top;
       if (currentTop < top)
          top = currentTop;
   });

   $(window).scrollTop(top - offset);
   $(this).focus();
};

$(".myfield").smoothFocus(10); //Sets focus to be 10px above to respective label.

通过这种方式，您可以拥有非常强大的方式来获得正确的焦点。我没试过它。