进行有效的单选选择或文本输入后,关注下一个 div
Focus on next div when valid radio selection or text input has been made
我有一个表格。每当用户在文本输入上按下回车键,或者当他们点击或单击单选按钮时,我希望能够将焦点设置到下一个
"formItem" div.
我的表单结构是这样设置的:
<div class="formItem" ng-class="{'invalidField' : calculate.wasSkipped(calculationForm.nonsustainedVT)}">
<ng-form name="nonsustainedVT" novalidate>
<div class="header"><span class="title">3) Nonsustained VT </span></div>
<div class="content">
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTYes" type="radio" required name="nonsustainedVT" ng-value="true" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="4">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTYes">Yes</label>
</div>
</div>
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTNo" type="radio" required name="nonsustainedVT" ng-value="false" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="5">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTNo">No</label>
</div>
<span class="radioValidationHack!" ng-show="false">{{calculate.formData.nonsustainedVT}}</span>
</div>
</div>
</ng-form>
</div>
每个输入都有一个 tabindex,所以我考虑以某种方式使用它,但是一旦用户做出选择,我不希望只将焦点移动到下一个 tabindex,因为它可能在同一个单选组中.我希望将焦点设置到下一个 "formItem" div.
请参阅以下 Plunkr 以获得更大的代码示例:
http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview
您不需要标签索引,您可以使用表单内标签项的顺序。我会像这样制作一个 myFormItem 指令:
directive('myFormItem', function() {
return {
link: function(scope, element, attr) {
var form = element.closest('form'),
items = form.find('[my-form-item]'),
index = items.index(element),
nextFormItem = $(items[index+1]);
element.find('input[type=radio]').on('click', function() {
nextFormItem.find('input').focus();
});
element.find('input[type=text]').on('keypress', function(e) {
if (e.which === 13) {
nextFormItem.find('input').focus();
}
});
}
};
});
并且您需要将 my-form-item
属性添加到每个 .formItem
(顺便说一句,您应该为 类 使用 kebab-case)
我有一个表格。每当用户在文本输入上按下回车键,或者当他们点击或单击单选按钮时,我希望能够将焦点设置到下一个 "formItem" div.
我的表单结构是这样设置的:
<div class="formItem" ng-class="{'invalidField' : calculate.wasSkipped(calculationForm.nonsustainedVT)}">
<ng-form name="nonsustainedVT" novalidate>
<div class="header"><span class="title">3) Nonsustained VT </span></div>
<div class="content">
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTYes" type="radio" required name="nonsustainedVT" ng-value="true" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="4">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTYes">Yes</label>
</div>
</div>
<div class="radioGroup">
<div class="radio-wrapper">
<input id="nonsustainedVTNo" type="radio" required name="nonsustainedVT" ng-value="false" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="5">
</div>
<div class="label-wrapper">
<label for="nonsustainedVTNo">No</label>
</div>
<span class="radioValidationHack!" ng-show="false">{{calculate.formData.nonsustainedVT}}</span>
</div>
</div>
</ng-form>
</div>
每个输入都有一个 tabindex,所以我考虑以某种方式使用它,但是一旦用户做出选择,我不希望只将焦点移动到下一个 tabindex,因为它可能在同一个单选组中.我希望将焦点设置到下一个 "formItem" div.
请参阅以下 Plunkr 以获得更大的代码示例: http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview
您不需要标签索引,您可以使用表单内标签项的顺序。我会像这样制作一个 myFormItem 指令:
directive('myFormItem', function() {
return {
link: function(scope, element, attr) {
var form = element.closest('form'),
items = form.find('[my-form-item]'),
index = items.index(element),
nextFormItem = $(items[index+1]);
element.find('input[type=radio]').on('click', function() {
nextFormItem.find('input').focus();
});
element.find('input[type=text]').on('keypress', function(e) {
if (e.which === 13) {
nextFormItem.find('input').focus();
}
});
}
};
});
并且您需要将 my-form-item
属性添加到每个 .formItem
(顺便说一句,您应该为 类 使用 kebab-case)