左から右に移動するためのタブインデックス

AngularJS HTMLでアプリケーションを作成しました。この場合、テキストボックス、タブ、リンク、ボタンなどのタブの順序は、左から右の順にする必要があります。行の一番右側のオブジェクトに達すると、タブが一番左のテキストボックスに移動します。左から右に移動するためのタブインデックス

これを達成するには、要素にタブインデックスを追加しましたが、要件ごとに左から右への移動が必要です。

は、1つのサンプル・コードは、以下の追加：

：設計されたUIとして

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

を二つの部分、各部分に分けた場合の設計は、4つのコンボボックスを持っているので、もし、コラム設計であり、それらは次のように追加されます

路Div1

フィールド1
フィールド3
フィールド5
Field7

DIV2

フィールド2
フィールド4
Field6
Field7

そして両方のDIVは、以下のように追加される：0

>フィールド2、フィールド3 - - >フィールド4 .... Field7 - > Field8

しかしField1->フィールド3のようにカーソルが移動 - その後> Field7フィールド2 - >フィールド5 - 私はフィールド1のようにタブの動きを必要とする

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

> Field4 - > Field6 - > Field8

私はタブ - インデックスを設計どおりに左から右の方向に指定しましたが、カーソルのフォーカスはデザインに追加されると常に上から下に移動します。

タブインデックスとフォーカスを左から右の方向に設定してから、下位に設定するには、UIを再フォーマットしないでください。

デザイン変更なしで手動でタブインデックスを追加する方法はありますか？

出典

2017-06-09 Neelam Sharma

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

出典

2017-06-09 10:31:25

ホー通過する詳細情報についてplunker

作業最後の要素に到達すると最初のインデックスに移動します。すなわち、8fdsfsddに達した場合、カーソルは1fdsfsdf要素に移動します。？ –

タブキーを押すだけではできません。それが必要ではないと私は思います。しかし、あなたがタブを何度も押すと、URLボックスブラウザが一度焦点を合わせると、ループは続行され、同様に良い練習ではありません。 –

私のサンプルタブインデックスは0から始まり、 1。これは、最後にタブが押されたときに最初に設定する主な要件です。 –

左から右に移動するためのタブインデックス

答えて

関連する問題