我想知道为什么在具有负边距(
在我的情况下,我需要防止这种行为,因为我有一个侧边栏菜单(在屏幕外),用户按下tab键几次后才会显示。但它不应该这样。我只想在移动设备和平板电脑上显示这个侧边栏。 注意:更重要的是,在Firefox和Google Chrome中,这种行为是不同的。在我的例子中,如果你删除
margin-right:-170px
)的div容器上按下TAB键
后,包含可聚焦元素(输入、超链接)的屏幕会显示出来?有什么想法吗?在我的情况下,我需要防止这种行为,因为我有一个侧边栏菜单(在屏幕外),用户按下tab键几次后才会显示。但它不应该这样。我只想在移动设备和平板电脑上显示这个侧边栏。 注意:更重要的是,在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();
}
});
>> 从截图中的工作示例:
.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
display: none
这样的东西,是否有特殊原因? - RoToRa