Tab-index to move left-to-right then to down

Question

We have created an application in AngularJS HTML. In this the tab order on text boxes, links, buttons, and other objects should be left-to-right. Once the right-most object on the row is reached, the tab should go down and to the left-most text box.

To achieve this I have added tab-index on element, but as per the requirement I need left-to-right movement.

One sample code added below :

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

As the UI designed are in column design, so if the design if divided into two parts and each part have four combo boxes, then they are added as :

Div1

Field1
Field3
Field5
Field7

Div2

Field2
Field4
Field6
Field7

Then both div are added as :

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

I need tab movement as Field1 -> Field2, Field3 -> Field4....Field7 -> Field8

But the cursor moves as Field1-> Field3 -> Field5 -> Field7 then Field2 -> Field4 -> Field6 -> Field8

As I have given tab-index as left to right direction as they designed but the cursor focus always moving in top to down as they are added in the design.

How to set tab index and focus in left to right direction then to down without reformatting the ui ?

Is there any way to manually adding tab-index without design changes?

Answer 1

Working plunker

For more info go through 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 to move left-to-right then to down

Question

1 answers

solution1
1 2017-06-09 10:31:25

Tab-index to move left-to-right then to down

Question

1 answers

solution1 1 2017-06-09 10:31:25

solution1
1 2017-06-09 10:31:25