AngularJS 和 Tab 键顺序（禁用按钮）

Question

我有一个表单，我只使用 TAB 导航。 Tab 键顺序应该是输入 > 选择 > 按钮，但由于 SUBMIT 上的 ng-disable，在某些浏览器上，选择中的 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');
    }
});

JsFiddle here.

在 Mac FF 上，最后一个选项卡会在启用提交按钮之前将您踢到地址栏。 Mac Chrome 按您的预期工作，专注于最终选项卡后的提交按钮。我知道 Windows 很笨拙，但没有确切的规格要发布。

想法？我怎样才能以万无一失的方式做到这一点？

编辑 我选择了@David B. 的答案，因为它是最好的 Angular 解决方案。我最终在提交按钮之后使用了一个有点隐藏的元素，因此焦点将保持在同一个一般区域。蹩脚和老套，我知道，但在紧迫的期限内它奏效了。

<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>

Answer 1

发生这种情况是因为 Firefox 不会在选择的键驱动更改时发送更改事件。 Angular 在点击选项卡之前不会看到更改，因此在浏览器处理选项卡（并将焦点发送到其他元素，例如地址栏）之前，不会启用提交按钮。 W3C 标准建议在控件失去焦点之前不要发送事件，尽管 Chrome 会为任何更改发送事件，而 Firefox 会在更改是鼠标驱动的情况下发送。

查看 angularjs 问题跟踪器了解更多信息：https://github.com/angular/angular.js/issues/4216

按照问题跟踪器中的建议，通过以下选择指令 (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");
            })
        }
    }
})

您需要 在 AngularJS 之前加载 JQuery，才能在 element 对象上使用 trigger 函数。

在您的选择中手动包含一个空选项（<option value=""></option>)，否则当控件获得焦点时将自动选择第一个选项。

与默认行为不同，这个空选项在选择一个真实选项后不会消失。我想您可以通过ng-options 或ng-repeat 声明所有选项来删除空选项，然后在选择了实际选项后从绑定范围中删除空选项，但我从未尝试过。