为什么按 TAB 键（:focus 效果）会导致定位在屏幕外的 <div> 元素和其中的 <input> 字段出现在屏幕上？
Mic*_*ney 6 html css firefox google-chrome viewport
我想知道，为什么在按下包含可聚焦元素（输入、超链接）的TAB key负边距右 ( margin-right:-170px) 的div 容器后显示在屏幕上？有任何想法吗？
在我的情况下，我需要防止这种行为，因为我有侧边栏菜单（屏幕外），这是在用户多次按下 Tab 按钮后显示的。它不应该。我只想在移动和平板设备上显示此侧边栏。
注意：还有什么。该行为是不同的Firefox，并在不同的Google Chrome。在我的示例中，如果您删除<input>元素并只留下超链接<a>，则在按下 Tab 键后该框将不会显示。在 Chrome 中它会。
类似帖子： Chrome 错误？或者如何防止表单字段在聚焦时滚动容器？
解决方案之一（防止TAB）： 可以解决问题，但不推荐。
$("body").on("keydown", function (e) {
if (e && e.keyCode === 9) {
console.log('Tab was pressed', e);
e.preventDefault();
}
});
>> 截图中的工作示例：
$("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;
}>> 工作示例 #2
将您设置.box为fixed而不是absolute防止该行为。
.box {
/* ... */
position: fixed; /* position the element relative to the viewport */
/* ... */
}
我假设是因为浏览器无法“超出视口”滚动。如果您的意图是将元素放置在屏幕外，这也是更直观的语义。
如果侧边栏仅适用于小型设备，我同意在其他设备上根本不显示它更干净的观点。例如
@media all and (min-width: 769px) { /* determining the correct size is up to you */
.box {
display: none;
}
}
但请注意，视口实际上并不是检测“小设备”的非常可靠的方法
解释
该框放置在您的内部<body>，它会展开以容纳内容（通过水平滚动条显而易见）。当按 Tab 键将焦点放在 上时<input>，浏览器会将焦点元素滚动到视图中。所以实际上不是盒子而是整个元素内容向左移动。从技术上讲，scrollLeft包含节点（<body>在您的情况下）的属性设置为使得输入在屏幕上可见。
这是从 Chromium 的角度来看，更精细的实现细节可能因浏览器而异。
| 归档时间： |
|
| 查看次数： |
3404 次 |
| 最近记录： |