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();
        }
    });

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

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