Question

我正在创建比下面的代码片段更复杂的东西，直到遇到错误如果单击文本字段，然后单击 Tab ，文本字段及其“兄弟姐妹”将移动到左侧。

造成这种情况的原因是什么？如何阻止它发生？

（之所以有这么多不必要的divs，是因为正如我之前所说，这是一个更复杂的项目。我把它缩小到以下。）

JSFiddle

<div id="fullWrapper" style="width: 470px;">
  <div id="pickerWrapper" style="width: 470px;">
    <div id="overallSlidersWrapper" style="position: relative; background-color: greenYellow;">
      <div class="sliderOuterWrapper" style="overflow: hidden;">
        <div class="sliderInnerWrapper" style="width: 940px; display: flex;">
          <div class="sliderInnerContentWrapper" style="overflow: hidden; width: 470px;">
            <div class="sliderContent">
              <input type="text">
              <img src="http://i.imgur.com/nYp8cnV.jpg" />
            </div>
          </div>
          <div class="sliderInnerContentWrapper" style="overflow: hidden; width: 0px;">
            <div class="sliderContent">
              <input type="text">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

你正在选择下一个元素：图像。

如果您点击SHIFT-TAB（Windows中的反向标签功能），您将最终返回输入。

效果是由子元素大于其容器引起的。如果您将溢出元素从width: 940px切换为width: 100%，则会移除移位效果。

Revised Demo

`tabindex`

使用tabindex属性，您可以控制标签顺序。

首先按时间顺序导航具有正值的元素
HTML源代码中不支持tabindex或值为0的元素的元素
具有负值的元素（例如tabindex="-1"）无法通过Tab键获得焦点

此处有更多详情：7.4.1 Sequential focus navigation and the tabindex attribute

Answer 2

你的“sliderInnerWrapper”宽度为940px，而容器为470px。这意味着内容将在容器内滚动。点击标签正在聚焦下一个对象，该对象导致滚动交叉显示“sliderInnerWrapper”内容的其余部分。

Answer 3

@Jessica把你的tabindex =＆＃34; -1＆＃34;第二个隐藏输入的属性。这将解决问题。

＆＃13;

<div id="fullWrapper" style="width: 470px;">
    <div id="pickerWrapper" style="width: 470px;">
        <div id="overallSlidersWrapper" style="position: relative; background-color: greenYellow;">
            <div class="sliderOuterWrapper" style="overflow: hidden;">
                <div class="sliderInnerWrapper" style="width: 960px; display: flex;">
                    <div class="sliderInnerContentWrapper" style="overflow: hidden; width: 470px;">
                        <div class="sliderContent">
                            <input type="text">
                            <img src="http://i.imgur.com/nYp8cnV.jpg">
                        </div>
                    </div>
                    <div class="sliderInnerContentWrapper"  style=" overflow: hidden; width: 0px; ">
                        <div class="sliderContent">
                            <input tabindex="-1" type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

按下“tab”键时，内容移动到左侧

JSFiddle

3 个答案:

`tabindex`