制表符-索引从左向右再向下移动
我们用AngularJS HTML创建了一个应用程序。在这种情况下，文本框、链接、按钮和其他对象上的选项卡顺序应该是从左到右的。一旦到达行上最右边的对象，选项卡就应该向下移动到最左边的文本框。
为了实现这一点，我在元素上添加了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
- 字段3
- 字段5
- 字段7
DIV2
- 字段2
- 字段4
- 字段6
- 字段7
则两个div都添加为：
<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？
共有1个答案
工作柱塞
有关更多信息，请参阅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;
}
-
Framework7 完全支持从右向左的语言。你只需要增加一个额外的CSS文件即可： <!DOCTYPE html> <html> <head> ... <title>My App</title> <!-- Path to Framework7 Library CSS--> <link rel="stylesheet" href="path/to/framewo
-
我需要在我的代码中检测滑动方向。我可以检测到方向，但它就像我向右、右上方或左上方滑动一样。左边也一样，我的要求是不抬手指，如果我向左划，它应该只向左，所有的方向都一样。有人能帮帮我吗。提前感谢！ @重写公共布尔onTouchEvent（MotionEvent touchevent）{
-
我有一个下拉菜单，除了一个我无法解决的小错误外，它工作得很好。 第一个下拉框项正常出现。然而，第二个下拉框项稍微向右移动。我猜想是我设置的链接的边距导致下拉框稍微向右移动。如果是这样的话，我能做些什么来解决这个问题呢？ 这是一个简单的导航菜单，它将drop菜单项的位置设置为绝对位置，并由父元素的overflow：隐藏功能隐藏。悬停时，下拉框会显示溢出：可见。 现场在这里- CSS 超文本标记语言
-
我在水平方向上使用RecyclerView，New element从左到右。和滚动是 ltr。如何改变这个方向？ XML 代码： 和Java: 适配器： public class AdapterMainPrice extender RecyclerView.Adapter {
-
我搜索了一些滑动示例， 但我仍然找不到从右向左滑动的例子。 请任何一个给样品项目滑动菜单从右到左
-
我试图将一个视图从右向左滑动，点击一个按钮，它的可见性就消失了，点击另一个按钮，它的可见性就消失了。我尝试了以下解决方案。但是它要求视图是可见的，并且它会将视图从一个位置滑动到另一个位置。我想要一个滑动效果，就像那样，但是要有。我怎样才能做到这一点？