AngularJS和Tab顺序(禁用按钮)
我有一张表格，我只使用TAB导航。选项卡顺序应该是input > select >按钮，但是由于SUBMIT上的ng-禁用，在某些浏览器上，选择之外的Tab会把您踢到其他地方。
HTML
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<form name="myForm" ng-submit="submit()" novalidate>
First Name: <input type="text" ng-model="Data.FirstName" required><br>
Last Name: <select ng-model="Data.LastName" required>
<option value="Bigglesworth">Bigglesworth</option>
<option value="Burgermeister">Burgermeister</option>
</select><br>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
</form>
</div>
</div>JS
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return {
FirstName: '',
LastName: ''
};
});
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.Data = Data;
$scope.submit = function() {
console.log('you just submitted, foolio');
}
});在Mac上，最后一个选项卡在启用submit按钮之前将您踢到地址栏。Mac就像你所期望的那样工作，在“最后”选项卡之后，专注于提交按钮。我知道Windows很简陋，但没有确切的规格可供发布。
的想法？我怎样才能以一种防伪的方式做到这一点呢？
编辑我选择了@David .的答案，因为它是最好的角度解决方案。最后，我在提交按钮之后使用了一个有点隐藏的元素，这样焦点就会保持在相同的区域内。我知道，这很糟糕，但对于一个紧迫的截止日期来说，这是可行的。
<h3><button class="fakebtn_hack">Confirmation</button></h3>
<style>.fakebtn_hack {background:none; border:none; color: #FF6319; cursor: default; font-size: 1em; padding: 0;}</style>回答 1
Stack Overflow用户
发布于 2014-05-22 04:46:58
这是因为Firefox不会在select的键驱动更改上发送更改事件。只有单击选项卡才能看到更改，因此在浏览器处理选项卡之后才启用submit按钮(并将焦点发送到其他元素，例如地址栏)。W3C标准建议在控件失去焦点之前不要发送事件，但是Chrome会发送任何更改，如果更改是鼠标驱动的，火狐就会发送。
有关更多信息，请参见angularjs问题跟踪器：https://github.com/angular/angular.js/issues/4216
正如问题跟踪器中所建议的那样，通过以下select指令(http://jsfiddle.net/j5ZzE/)手动发出更改事件来解决它：
myApp.directive("select", function () {
return {
restrict: "E",
require: "?ngModel",
scope: false,
link: function (scope, element, attrs, ngModel) {
if (!ngModel) {
return;
}
element.bind("keyup", function () {
element.trigger("change");
})
}
}
})需要在JQuery之前加载AngularJS才能使trigger函数在element对象上可用。
手动包含一个空选项(<option value=""></option>)在您的选择或第一个选项将自动选择时，控件收到焦点。
与默认行为不同，此空选项在选择实物选项后不会消失。我认为您可以通过ng-options或ng-repeat声明所有选项，然后在选择了真正的选项后从绑定范围中删除空选项，但我从未尝试过。
https://stackoverflow.com/questions/23792570
复制相似问题
腾讯云开发者
