Tab-index从左到右然后下移 [英] Tab-index to move left-to-right then to down
问题描述
我们已经在AngularJS HTML中创建了一个应用程序。在此，文本框，链接，按钮和其他对象上的Tab键顺序应该是从左到右。一旦到达该行最右侧的对象，该标签应该向下并到最左边的文本框。为了实现这一点，我添加了tab-index元素，但根据需要我需要从左到右的移动。
下面添加了一个示例代码：
< div class =col-sm-12style =margin-bottom：1％;>
< div class =col-sm-5>
< div class =form-group>
< label class =control-labelfor =field_Name>名称< span style =color：red;> *< / span>< / label>
ng-model =vm.Name
ng-maxlength =255/>
< div ng-if =myForm.Name。$ invalid>
ng-if =myForm.Name。$ error.maxlength>
此字段不能超过255个字符。
< / p>
< / div>
< / div>
< div class =form-group>
< label class =control-label>上传示例文件< / label>
< input tab-index =2type =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-blockng-if =myForm.file。$ error.minSize>文件大小应该大于5 KB。< / p>
< / div>
< / div>
< / div>
< div class =col-sm-5>
< div class =form-group>
< label class =control-labelfor =field_Description>档案描述< / label>
id =field_Descriptionng-maxlength =2000
ng-model =vm.Description
name =文件说明/>
< div ng-if =myForm.Description。$ invalid>
ng-if =myForm.Description。$ error.maxlength>
此字段不能超过2000个字符。
< / p>
< / div>
< / div>
< / div>
< div class =col-sm-2>< / div>
< / div>由于UI的设计都是在列设计中进行的，所以如果设计如果分成两部分和每个部分有四个组合框，然后它们被添加为：
Div1
- Field1
- Field3
- Field5
- Field7
Div2
- Field2
- Field4
然后这两个div都被添加为：
$ b - Field6
- Field7
/ p>
< div class =col-sm-12> ... Div1 ... Div2 ..< / div>
我需要制表符移动为Field1 - > Field2，Field3 - > Field4 .... Field7 - > Field8
但光标移动为Field1-> Field3 - > Field5 - > Field7，然后是Field2 - > Field4 - > Field6 - > Field8
正如我设计的tab-index从左到右的方向一样，但它们在设计中添加时总是按照从上到下的顺序移动。
如何设置标签索引和焦点从左到右的方向，然后下来，而不重新格式化用户界面？
有什么办法可以手动添加tab-index没有设计变更？
解决方案工作 plunker
欲了解更多信息，请浏览 tabindex
$ b
html
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheethref =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>注意：< / strong>您可以在styles.css中更改容器的显示风格
< / body>
< / html>
css
.container {
display：flex;
justify-content：space-around;
}
.container> div {
border：1px solid＃000;
padding：30px;
}
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?
解决方案 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从左到右然后下移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
