HTML：当浏览器滚动到某个输入时，如何才能使其将整个输入的父级显示出来？

Question

HTML：当浏览器滚动到某个输入时，如何才能使其将整个输入的父级显示出来？

Pro*_*ody 2 html

我不是网络专家，所以这可能是我所缺少的非常简单的东西，但是：
考虑以下页面： http:
//pastehtml.com/view/1bg9qno.html

它基本上是一个 s 列表<input>，每个输入都有一个<span>带有文本的助手（它将随着输入的值一起改变keyUp）。

因此，当列表足够长时（如上面的 HTML 页面），如果您通过 Tab 键浏览输入，您最终将到达页面底部的输入，再次 Tab 键，浏览器将向下滚动到下一个输入。

就我而言，输入具有对我的应用程序至关重要的帮助文本。

问题是，当用户向下切换到不可见的输入时，浏览器只会将该输入带入视图，而不是<div class="item">包含帮助文本的整个父级 ( )。因此，当用户在输入中输入内容时，该帮助文本对用户来说是不可见的。

如何告诉浏览器在聚焦视图外输入时将整个父级带入视图？
有什么优雅的解决方案吗？

顺便说一句：这在 Chrome 中不会发生，因为 Chrome 总是向下滚动部分页面，但它总是在Firefox中发生，Firefox 总是尽可能少地滚动到输入。

HTML 看起来像这样：

<body>
    <div class="item">
        <input type="text" value="text" />
        <br />
        <span>helper text</span>
    </div>
    <hr />
    ...
    <hr />
    <div class="item">
        <input type="text" value="text" />
        <br />
        <span>helper text</span>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

tob*_*ies 5

<html>
  <head>
    <script>
      function scrollParentIntoView(elem){
        setTimeout(function(){
           var children  = elem.parentNode.children;
           var lastChild = children[children.length - 1];
           lastChild.scrollIntoView();
           elem.parentNode.scrollIntoView();
           //elem.ScrollIntoView();
         },1);
      }
    </script>
  </head>
  <body>
    ...
    <div>
      <input onfocus="scrollParentIntoView(this);" />
      ...
      <p>end</p>
    </div>
    ...
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我已经在 FF 和 Chrome 上进行了测试，似乎可以完成这项工作 - 当每个“...”被替换为十几个标签时，您可以看到输入和“结束”

归档时间：	15 年，3 月前
查看次数：	1202 次
最近记录：	15 年，3 月前