Html 如何防止DIV在按下TAB键后滑动

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

当聚焦第一张幻灯片上的输入字段时，如果用户点击TAB键，则第二张幻灯片的输入字段上的焦点将自动移动，第二张幻灯片将可见。（请注意，

marginleft:0px！important

仍在应用，但仍移动了

DIV

）

我不想禁用TAB键，这也意味着使用

tabindex=“-1”

不是解决方案，因为它会将文本输入与导航隔离

我不介意焦点是否转移到第二个输入字段，但第二张幻灯片不应该移动并可见。我试着使用

左边距：0px！重要信息

它不起作用

如何使用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>

---

最简单的方法是将

tabindex=“-1”

作为属性添加到第二个输入字段中（或根据您的偏好，添加必要的属性）。它看起来像这样：

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

。。。
...

---

希望这有帮助。

实际上，当您按Tab键时，焦点会切换到下一个输入，这就是为什么它会“滑动”，因为它们稍微偏移。但是它的容器的

左边距仍然是
0px
它如何滑动？这会将特定的文本输入与导航隔离，因此，这就像禁用tab一样好。为什么您希望用户在屏幕外的第二个输入字段上使用tab键呢？用户可能会导航到第二张幻灯片，在那里他可能希望使用tab键将输入字段集中在第二张幻灯片上。
...
  <input type="text" tabindex="-1">
...