Chrome 为什么按Tab键(：焦点效果)会导致位于屏幕外< div>且其中包含字段的元素< input>出现在屏幕上？

kadbb459 于 2022-12-16 发布在 Go

关注(0)|答案(3)|浏览(224)

我想知道，为什么按下TAB key后，包含可聚焦元素（输入，超链接）的右负边距div容器（margin-right:-170px）显示在屏幕上？有什么想法吗？
在我的情况下，我需要防止这样的行为因为我有侧边栏菜单（屏幕外），这是显示后，用户按下标签按钮几次。它不应该。我想显示这个侧边栏只在移动的和平板设备。

**注：**还有。行为是不同的在Firefox和不同的Google Chrome。在我的例子中，如果你删除<input>元素，只留下超链接<a>，框将不会显示后，按Tab键。在Chrome中，它会。
类似职位：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();
        }
    });

〉〉屏幕截图中的工作示例：

x一个一个一个一个x一个一个二个x

〉〉工作示例#2

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

google-chrome

来源：https://stackoverflow.com/questions/33995888/why-pressing-tab-key-focus-effect-causes-positioned-off-the-screen-div-elem

3条答案

按热度按时间

9o685dep1#

将.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;
    }
}

但请注意，viewport实际上并不是检测“小型设备”的非常可靠的方法 *

解释

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

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

赞(0）回复(0）举报 2022-12-16

tyky79it2#

将tabIndex设置为-1，以防止对不希望使用Tab键获得焦点的元素使用Tab键获得焦点。

赞(0）回复(0）举报 2022-12-16

q3aa05253#

一个简单和最好的方法来处理这个与CSS，是使用CSS显示属性.例如：

.slider-content .items:not(.active) {
    display: none;
}

字符串
对于其他不活跃的幻灯片。谢谢~RDaksh

赞(0）回复(0）举报 2022-12-16

我来回答

Chrome 为什么按Tab键(：焦点效果)会导致位于屏幕外< div>且其中包含字段的元素< input>出现在屏幕上？

3条答案

解释

相关问题

热门标签

最新问答