Question

我们在AngularJS HTML中创建了一个应用程序。在此，文本框，链接，按钮和其他对象上的Tab键顺序应该是从左到右。到达行上最右侧的对象后，该选项卡应向下并显示在最左侧的文本框中。

为实现这一点，我在元素上添加了tab-index，但根据要求，我需要从左到右的移动。

下面添加了一个示例代码：

<div class="col-sm-12" style="margin-bottom: 1%;">
   <div class="col-sm-5">
      <div class="form-group">
         <label class="control-label" for="field_Name">Name <span style="color:red;">*</span></label>
         <input tab-index="0" required type="text" class="form-control" name="Name" id="field_Name"
            ng-model="vm.Name"
            ng-maxlength="255"/>
         <div ng-if="myForm.Name.$invalid">
            <p class="help-block"
               ng-if="myForm.Name.$error.maxlength">
               This field cannot be longer than 255 characters.
            </p>
         </div>
      </div>
      <div class="form-group">
         <label class="control-label">Upload Sample File</label>
         <input tab-index="2" type="file"
            name="file"
            id="uploadSampleFile"
            ng-model="vm.File"
            ngf-select
            accept="file_extension"
            ngf-min-size="5000">
         <div ng-if="myForm.file.$invalid">
            <p class="help-block" ng-if="myForm.file.$error.minSize">File size should be greater than 5 KB.</p>
         </div>
      </div>
   </div>
   <div class="col-sm-5">
      <div class="form-group">
         <label class="control-label" for="field_Description">File Description </label>
         <textarea tab-index="1" class="form-control" style="height: 200px;"
            id="field_Description" ng-maxlength="2000"
            ng-model="vm.Description"
            name="File Description"/>
         <div ng-if="myForm.Description.$invalid">
            <p class="help-block"
               ng-if="myForm.Description.$error.maxlength">
               This field cannot be longer than 2000 characters.
            </p>
         </div>
      </div>
   </div>
   <div class="col-sm-2"></div>
</div>

由于设计的UI是在列设计中，所以如果设计分为两个部分，每个部分有四个组合框，那么它们将被添加为：

Div1

字段1
Field3
字段5
字段7

Div2

字段2
Field4
字段6
字段7

然后将两个div添加为：

<div class="col-sm-12"> ... Div1 ...Div2.. </div>

我需要标签移动为Field1 - ＆gt; Field2，Field3 - ＆gt; Field4 .... Field7 - ＆gt;字段8

但光标移动为Field1->; Field3 - ＆gt; Field5 - ＆gt; Field7然后Field2 - ＆gt; Field4 - ＆gt; Field6 - ＆gt;字段8

正如我在设计中给出了从左到右方向的tab-index，但是光标焦点总是在设计中添加时从上到下移动。

如何在不重新格式化ui的情况下设置制表符索引并从左到右聚焦然后向下聚焦？

有没有办法在没有设计更改的情况下手动添加tab-index？

Answer 1

工作plunker

有关详情，请浏览tabindex

<强> HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <div>
      <h1>Div1</h1>
      <div tabindex="1">1fdsfsdf</div>
      <div tabindex="2">3fdsfsdd</div>
      <div tabindex="3">5fdsfsdf</div>
      <div tabindex="4">7fdsfsdd</div>
    </div>

    <div>
      <h1>Div2</h1>
      <div tabindex="1">2fdsfsdf</div>
      <div tabindex="2">4fdsfsdd</div>
      <div tabindex="3">6fdsfsdf</div>
      <div tabindex="4">8fdsfsdd</div>
    </div>
  </div>
  <br/>
  <strong>Note: </strong>You can change display style of container in styles.css
</body>

</html>

<强> CSS

.container {
  display: flex;
  justify-content: space-around;
}
.container > div {
  border: 1px solid #000;
  padding: 30px;
}

Tab-index从左向右移动然后向下移动

1 个答案: