Geek Answers Handbook

Tab-index to move left-right, then down

We created the application in AngularJS HTML format. In this case, the order of the tabs in the text fields, links, buttons, and other objects should be from left to right. When the rightmost object in the line is reached, the tab should go down to the leftmost text field.

To do this, I added a tab-pointer to the element, but as required, I need to move from left to right.

The following is one example code:

<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>

Since the user interface is developed in the design of the columns, therefore, if the design, if it is divided into two parts, and each part has four combined fields, they are added as:

Div1

  • Field1
  • Field3
  • Field5
  • Field7

Div2

  • Field2
  • Field4
  • Field6
  • Field7

Then both divs are added as:

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

, Field1 → Field2, Field3 → Field4.... Field7 → Field8

Field1- > Field3 → Field5 → Field7, Field2 → Field4 → Field6 → Field8

tab , , , .

-, ui?

?

0
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;
}
+1

More articles:


All Articles