为什么按 TAB 键（：焦点效果）会导致位于屏幕外的 <div> 元素和 <input> 字段出现在屏幕上？

Question

我想知道，为什么在 div 容器上按下 TAB key 后显示包含可聚焦元素（输入、超链接）的负边距（margin-right:-170px）屏幕上？有什么想法吗？

在我的例子中，我需要防止这种行为，因为我有侧边栏菜单（在屏幕外），用户按下选项卡按钮几次后会显示该菜单。它不应该。我只想在移动设备和平板设备上显示此边栏。

注：更重要的是。 行为在 Firefox 和 Google Chrome 中不同 。在我的示例中，如果您删除 <input> 元素并仅保留超链接 <a>，则在按 Tab 键后该框将不会显示。 Chrome 会。

相似 post: Chrome bug? or how do I prevent a form field to SCROLL the container when focused?

解决方案之一（防止TAB）： 可能会解决问题，但不推荐。

    $("body").on("keydown",  function (e) {
        if (e && e.keyCode === 9) {
            console.log('Tab was pressed', e);
            e.preventDefault();
        }
    });

>> 截图中的工作示例：

.box {
  width: 150px;
  height: 50px;
  display: block;
  right: 0;
  margin-right:-170px; /* Negative margin to set container off the screen*/
  padding:10px;
  background: #292929;
  color: #fff;
  position: absolute;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  box-shadow:2px 2px 5px rgba(0, 0, 0, .4)
}

.box.input {
    top: 0;
}

.box.hyperlink {
    top: 100px;
}

body {
  background: lightgray;
}

a {
  color: white;
}
input {
  margin:10px 15px;
}
p {
  width:400px;
  }

<p>After you press TAB key, box containing input will appear from the right on the screen.... but why?</p>

<div class="box input">
  <label>Custom Input 1</label>
  <input type="text" placeholder="some input" />
</div>         

<div class="box hyperlink">
  <label>Custom hyperlink</label>
  <a href="http://www.apple.com" target="_blank">Some link</a>
</div>

>> 工作示例 #2

http://jsfiddle.net/pndz/yy9kzp3e/

Answer 1

将 .box 设置为 fixed 而不是 absolute 可以防止这种行为。

.box {
    /* ... */
    position: fixed; /* position the element relative to the viewport */
    /* ... */
}

我假设是因为浏览器无法滚动 "beyond the viewport"。如果您打算将元素 放置在屏幕外 .

，这也是更直观的语义

如果侧边栏仅适用于小型设备，我同意这样的观点，即在其他设备上根本不显示它更干净。例如

@media all and (min-width: 769px) { /* determining the correct size is up to you */
    .box {
        display: none;
    }
}

但请注意，视口实际上并不是一种非常可靠的检测方式 'small devices'

说明

该框位于您的 <body> 内，它会展开以容纳内容（通过水平滚动条显而易见）。当按 Tab 键将焦点置于 <input> 时，浏览器会将焦点元素滚动到视图中。所以实际上不是盒子而是整个元素内容向左移动。从技术上讲，包含节点（在您的情况下为 <body>）的 scrollLeft 属性设置为使输入在屏幕上可见。

这是从 Chromium 的角度来看的，更精细的实现细节可能因浏览器而异。

Answer 2

将 tabIndex 设置为 -1 以防止 Tab 键聚焦到您不想使用 Tab 键获得焦点的元素。

为什么按 TAB 键（：焦点效果）会导致位于屏幕外的 <div> 元素和 <input> 字段出现在屏幕上？

Why pressing TAB key (:focus effect) causes positioned off-the-screen <div> element with <input> field inside it to appear on the screen?

html

css

firefox

google-chrome

viewport

说明