AngularJS - 在第一个文本框后将焦点设置到下一个文本框

Question

您好，我目前正在使用两个文本框中的日期时间选择器输入。

我想要做的是，在用户在第一个文本框中选择日期后，将弹出第二个文本框的日期时间选择器。用户无需单击第二个框。

这是我的代码。

HTML

<md-input-container>
    <input time="true" date="true" mdc-datetime-picker type="text" id="date" placeholder="Start Date" ng-model="date">
</md-input-container>

<md-input-container>
    <input time="true" date="true" mdc-datetime-picker type="text" id="date" placeholder="End Date" ng-model="date">
</md-input-container>

的javascript

(function () {
  'use strict';

  angular
    .controller('DemoCtrl_{{boundField.name}}', function ($scope, mdcDateTimeDialog) {
      $scope.date = new Date('{{boundField.value()}}');
      $scope.dateTime = new Date();
      $scope.minDate = moment().subtract(1, 'month');
      $scope.maxDate = moment().add(1, 'month');

      $scope.displayDialog = function () {
        mdcDateTimeDialog.show({
          maxDate: $scope.maxDate,
          time: false
        })
          .then(function (date) {
            $scope.selectedDateTime = date;
            console.log('New Date / Time selected:', date);
          });
      };

    })
  ;
})();

我是angularjs的新手，特别是javascript部分。非常感谢您的帮助。 ：）

Answer 1

只需使用下面的标签索引

<强>更新

我更新了id和ng-model变量。您使用相同的名称来表示开始日期和结束日期不正确。

HTML代码如下

<md-input-container>
    <input time="true" date="true" mdc-datetime-picker type="text" id="startdate" placeholder="Start Date" ng-model="startdate" tabindex="1">
</md-input-container>

<md-input-container>
    <input time="true" date="true" mdc-datetime-picker type="text" id="enddate" placeholder="End Date" ng-model="enddate" tabindex="2">
</md-input-container>

观察者代码如下

$scope.$watch('startdate', function (oldval,newval) {
        if(oldval!=newval)
        {
            var enddate = document.getElementById('enddate');
            enddate.focus();
        }
    });

只需在控制器中添加此观察程序代码

即可

在第一个文本框中选择日期后，它将检查该值是否与之前相同。如果没有，那么它将把焦点设置在结束日期。