Question

我的Angular应用中有一个表单，用户可以使用添加按钮输入相同字段值的倍数。

<md-content layout-padding="">
    <div>
      <form name="userForm">
        <div layout="row" ng-repeat="person in persons">
          <md-input-container flex>
            <label>First name</label>
            <input ng-model="person.firstName">
          </md-input-container>

          <md-input-container flex>
            <label>Last Name</label>
            <input ng-model="person.lastName">
          </md-input-container>
        </div>
        <md-button class="md-raised" ng-click="addAnother()">Add Another</md-button>
      </form>
    </div>
  </md-content>

工作Codepen

因此已经填充了几个输入，单击该按钮会添加一个新对象，以便显示一组新输入。

我想要的是新添加的行上的第一个输入以获得焦点，以便用户可以立即开始输入。

有没有办法以编程方式设置tabIndex？

Answer 1

检查一下。您可以在此处找到关于您的问题的最佳答案：Input autofocus attribute

＆＃13;

angular.module('ng').directive('ngFocus', function($timeout) {
    return {
        link: function ( scope, element, attrs ) {
            scope.$watch( attrs.ngFocus, function ( val ) {
                if ( angular.isDefined( val ) && val ) {
                    $timeout( function () { element[0].focus(); } );
                }
            }, true);

            element.bind('blur', function () {
                if ( angular.isDefined( attrs.ngFocusLost ) ) {
                    scope.$apply( attrs.ngFocusLost );

                }
            });
        }
    };
});

＆＃13;

<input type="text" ng-focus="isFocused" ng-focus-lost="loseFocus()">

Answer 2

我注意到你使用了一个名为md-input-focused

的类

方法1（最好的） 这是最简单的＆amp;优雅的解决方案。在角度中使用$last。在<md-input-container> First name Codepen添加类条件，如下所示：

<md-input-container flex ng-class="{'md-input-focused': $last}">
  <label>First name</label>
  <input ng-model="person.firstName">
</md-input-container>

此方法不需要额外的javascript更改，但只会添加焦点和放大器。不要使输入有效。如果要激活输入，请参阅以下方法。

方法2 检查codepen。这是相同的，但动态添加相同类的javascript方式

仅供参考：JQuery需要以下声明。希望你有。

这是你的神奇陈述。 Codepen

$('.layout-row:last-of-type').children().first().find('input').focus();

将此内容添加到您的$scope.addAnother功能超时内（非常重要）。

您的整个功能应该是

  $scope.addAnother = function() {
    $scope.persons.push({});
    setTimeout(function(){
      $('.layout-row:last-of-type').children().first().find('input').focus();
     }, 500);
  }

您甚至可以使用角度$timeout代替窗口setTimeout

Answer 3

你去了 - CodePen

标记

<input ng-model="person.firstName" auto-focus="true">

指令

// Inspired by Mark Rajcok's answer - http://stackoverflow.com/a/14837021/782358
.directive('autoFocus', function($timeout) {
    return {
        scope: { trigger: '@autoFocus' },
        link: function(scope, element) {
            scope.$watch('trigger', function(value) {
                if (value.toString() === "true") {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

动态设置输入的tabIndex

3 个答案:

动态设置输入的t​​abIndex

3 个答案:

动态设置输入的tabIndex