Question

我有一个有容器的结构，里面有两个幻灯片。每张幻灯片中都有一个文本输入字段。

当第一张幻灯片上的输入字段被聚焦时，如果用户点击TAB键，则自动焦点会在第二张幻灯片的输入字段上移动，第二张幻灯片可见。（请注意，margin-left:0px !impotant仍然适用，但仍然移动了DIV）

我不想禁用TAB键，这也意味着使用tabindex="-1"不是解决方案，因为它会将文本输入与导航隔离开来。

我不介意焦点转移到第二个输入字段，但第二张幻灯片不应移动并且可见。我尝试使用margin-left:0px !important它没有用。

如何使用HTML和CSS阻止此行为？

HTML

<div class="container">
  <div class="slider">
    <div class="inner">
        <input type="text" placeholder="please click me and hit tab">
    </div>
    <div class="inner" style="background:#797979">
       <input type="text">
    </div>
  </div>
</div>

CSS

.container{
  margin-top:200px;
  margin-left:300px;
  height:300px;
  width:300px;
  border:1px solid red;
  overflow:hidden;
}
.slider{
  margin-top:0px;
  margin-left:0px;
  height:100%;
  width:200%;
}
.inner{
  margin-top:0px;
  margin-left:0px;
  height:100%;
  width:50%;
  background:#cecece;
  float:left
}

input{
  width:200px;
  margin-top:20px;
  margin-left:46px;
  height:40px;
  color:black;
  padding-left:2%
}

Answer 1

最简单的方法是将tabindex="-1"作为属性添加到第二个输入字段（或根据您的偏好，根据需要添加任何一个）。它看起来像这样：

...
  <input type="text" tabindex="-1">
...

希望这有帮助。

按TAB后如何防止DIV滑动

1 个答案: