通过 Angular 中的隐藏输入选项卡答案

【问题标题】：Tab Through Hidden Inputs in Angular通过 Angular 中的隐藏输入选项卡
【发布时间】：2016-02-03 18:14:05
【问题描述】：

我正在寻找一种以角度方式通过隐藏输入进行制表符的方法。所以我有多个输入表单，但是当不集中时，我希望它们只显示文本。我正在寻找一种能力，一旦我选择了一个输入以通过其他输入进行选项卡，即使它们当前是隐藏的。

有什么建议吗？

【问题讨论】：

您无法聚焦隐藏元素。只是在不专注时以不同的方式设计它们，而不是隐藏它们。或者当按下“tab”时，将类型从“hidden”更改为“text”并然后触发焦点事件。
从 .focus() 的 jQuery 文档中扩展 @jperezov 的评论：尝试将焦点设置到隐藏元素会导致 Internet Explorer 出错。注意只在可见元素上使用 .focus() 。要在不为元素设置焦点的情况下运行元素的焦点事件处理程序，请使用 .triggerHandler("focus") 而不是 .focus()。
如果可见性 : hidden 与 display:none 在当前情况下具有相同的行为，您可以检查它，其他方法是设置宽度：0，它会起作用，但它仍然可以一些焦点效果。
您的意思是“以前隐藏的输入”吗？即，当您浏览表单时，您希望您的操作 (a) 将文本字段更改为输入字段，并 (b) 将焦点设置在该输入字段上？
@VishalBardoloi 是的。我希望能够在表格中很好地显示信息，但我希望用户能够单击单元格并能够开始通过 Tab 键输入信息。

标签： javascript angularjs forms input hidden

【解决方案1】：

使用 Angular 指令将您的输入输入到内联编辑器中。当页面加载时，您将处于显示模式（即显示 div 将被显示而编辑器 div 将被隐藏），然后在单击时，模式切换到编辑模式并且可见性被反转。

以下是 DatePicker 控件在包含在此类指令中时的外观的快速 sn-p。使用 Angular 1 和 Bootstrap 3（遵循John Papa's Angular Style Guide）：

HTML 模板 (inlineDatePicker.html)：

<div class="inline-edit">
    <div ng-if="!vm.inEditMode" data-ng-click="vm.enableEditMode()">
        <input type="hidden" data-ng-model="vm.dateModel" data-ng-required="vm.dateRequired" /><span>{{vm.dateModel}}</span> <span class="glyphicon glyphicon-calendar"></span>
    </div>
    <div ng-if="vm.inEditMode">
        <div class="well well-sm" style="position: absolute; z-index: 10">
            <datepicker data-ng-model="vm.dateModel" data-show-weeks="false"></datepicker>
            <button type="button" class="btn btn-sm btn-info" ng-click="vm.today()">Today</button>
            <button type="button" class="btn btn-sm btn-danger" ng-click="vm.cancel()">Cancel</button>
        </div>
    </div>
</div>

以及底层指令（inlineDatePicker.directive.js）：

(function () {
    'use strict';

    angular.module('myApp.inlineEdit')
    .directive('inlineDatePicker', inlineDatePicker);

    function inlineDatePicker() {
        'use strict';
        inlineDatePickerController.$inject = ['$scope', '$timeout'];

        return {
            restrict: 'A',
            replace: true,
            transclude: false,
            templateUrl: '/App/inlineEdit/date/inlineDatePicker.html',
            scope: {
                dateModel: '=',
                dateRequired: '@',
                dateChanged: '&'
            },
            controller: inlineDatePickerController,
            controllerAs: 'vm',
        };

        function inlineDatePickerController($scope, $timeout) {
            /* jshint validthis:true */
            var vm = this;
            vm.inEditMode = false;
            vm.dateModel = $scope.dateModel;
            vm.dateRequired = $scope.$eval($scope.dateRequired);
            vm.enableEditMode = enableEditMode;
            vm.cancel = cancel;
            vm.today = today;

            function enableEditMode() {
                vm.inEditMode = true;
            }

            function cancel() {
                vm.inEditMode = false;
            }

            function today() {
                vm.dateModel = new Date();
            }

            $scope.$watch('vm.dateModel', function (curr, orig) {
                $scope.dateModel = vm.dateModel;
                if (curr != orig && vm.inEditMode) {
                    $timeout($scope.dateChanged, 0);
                }
                vm.inEditMode = false;
            });

            $scope.$watch('dateModel', function () {
                vm.dateModel = $scope.dateModel;
            });
        }        
    }
})();

【讨论】：