问AngularJS和Tab顺序(禁用按钮)
EN

Stack Overflow用户

提问于 2014-05-21 11:53:18

回答 1查看 5.6K关注 0票数 3

我有一张表格，我只使用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>

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在这里。

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

forms

angularjs

user-experience

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-21 20: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");
            })
        }
    }
})