AngularJS和Tab顺序（禁用的按钮） [英] AngularJS and Tab Order (Disabled Buttons)
问题描述
我有一个表格，而且我用TAB导航只。 Tab顺序应该是输入>选择>按钮，但在提交，在某些浏览器的TAB出来的选择，因为的NG-禁用会踢你到别的地方。
HTML
＆LT; DIV NG-应用=对myApp＆GT;
＆LT; DIV NG控制器=FirstCtrl＆GT;
＆LT;形式NAME =myForm会NG提交=提交（）的novalidate＆GT;
名字：＆LT;输入类型=文本NG模型=Data.FirstName要求＆GT;＆LT; BR＆GT;
姓氏：其中，需要与GT选择纳克模型=Data.LastName;
＆LT;期权价值=Bigglesworth＆GT; Bigglesworth＆LT; /选项＆GT;
＆LT;期权价值=Burgermeister＆GT; Burgermeister＆LT; /选项＆GT;
＆LT; /选择＆GT;＆LT; BR＆GT;
＆LT;输入类型=提交值=提交NG-禁用= /＆GTmyForm会$无效的。
＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
JS
VAR对myApp = angular.module（'对myApp'，[]）;myApp.factory（数据，函数（）{
返回{
名字： ''，
姓： ''
};
}）;myApp.controller（'FirstCtrl'，函数（$范围，数据）{
$ scope.Data =数据;
$ scope.submit =功能（）{
的console.log（'你刚刚提交，foolio'）;
}
}）;
在Mac FF最后一个选项卡踢你到地址栏启用提交按钮之前。 Mac的Chrome的工作如你所期望，重点对提交按钮最后一个选项卡后。我知道Windows是janky，但没有确切的规格发布。
的思考？我怎样才能做到这一点的一个防呆时尚？
修改
我选择B. @大卫的回答，因为它是最好的解决方案角度。最后我用一个有些隐藏的元素右后提交按钮所以重点会留在同一地区。拉梅和哈克，我知道，但时间紧迫，它的工作。
＆LT; H3＆GT;＆LT;按钮类=fakebtn_hack＆GT;确认和LT; /按钮＆GT;＆LT; / H3 GT＆;
＆LT;风格＆GT; .fakebtn_hack {背景：无;边界：无;颜色：＃FF6319;光标：默认;字体大小：1EM;填充：0;}＆LT; /风格＆GT;
这是因为Firefox不上的选择关键驱动的变化发送更改事件。角看不到变化，直到标签被命中，所以提交按钮直到后的标签已由浏览器处理的启用（和焦点发送到某些其他元素，例如，地址栏）。直到控件失去焦点，虽然Chrome浏览器发送一个任何变化和Firefox没有，如果变化是鼠标驱动的W3C标准建议不发送事件。
查看更多angularjs问题跟踪： https://github.com/angular/ angular.js /问题/ 4216
由于在问题跟踪建议，通过手动发出通过以下选择指令更改事件（ HTTP解决它：// jsfiddle.net/j5ZzE/ ）：
myApp.directive（选择，函数（）{
返回{
限制：E，
要求：ngModel
适用范围：假的，
链接：功能（范围，元素，ATTRS，ngModel）{
如果（！ngModel）{
返回;
}
element.bind（KEYUP功能（）{
element.trigger（变）;
}）
}
}
}）
您需要JQuery的前的加载的 AngularJS有触发元素功能$ C>对象。
手动包括一个空的选项（＆LT;期权价值=＆GT;＆LT; /选项＆GT;）在选择或第一个选项将自动选中时在控件接收焦点。
与默认行为，这个空选项将不会选择一个真正的选择后消失。我想你可以通过通过声明的所有选项删除空选项NG选项或 NG-重复然后删除从绑定范围内一次真正的选择空单已被选中，但我从来没有尝试过。
I have a form, and I'm navigating only with TAB. Tab order should be input > select > button, but because of the ng-disable on the SUBMIT, on certain browsers the TAB out of the select will kick you somewhere else.
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');
}
});
On Mac FF the final tab kicks you to the address bar before enabling the submit button. Mac Chrome works as you'd expect, focusing on the submit button after final tab. I know Windows is janky, but don't have exact specs to post.
Thoughts? How can I do this in a fool-proof fashion?
EDIT I've selected @David B.'s answer as it's the best Angular solution. I ended up using a somewhat hidden element right after the the submit button so the focus would stay in the same general area. Lame and hacky, I know, but for a tight deadline it worked.
<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>
This happens because Firefox doesn't send a change event on key-driven changes of the select. Angular doesn't see the change until the tab is hit, so the submit button isn't enabled until after the tab has been processed by the browser (and focus sent to some other element, e.g., the address bar). The W3C standard suggests not sending the event until the control loses focus, although Chrome sends one for any change and Firefox does if the change was mouse-driven.
See the angularjs issue tracker for more: https://github.com/angular/angular.js/issues/4216
As suggested in the issue tracker, solve it by manually issuing the change event via the following select directive (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");
})
}
}
})
You'll need JQuery loaded before AngularJS to have the trigger function available on the element object.
Manually include an empty option (<option value=""></option>) in your select or the first option will be auto-selected when the control receives focus.
Unlike the default behavior, this empty option will not disappear after selecting a real option. I suppose you could remove the empty option by declaring all the options via ng-options or ng-repeat and then removing the empty one from the bound scope once a real option has been selected, but I've never tried it.
这篇关于AngularJS和Tab顺序（禁用的按钮）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
