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

Posted 2023-02-22

【中文标题】AngularJS - 在第一个文本框之后将焦点设置到下一个文本框

【英文标题】：AngularJS - Set focus to next textbox after first textbox

【发布时间】：2018-07-18 23:04:32

【问题描述】：

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

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

这是我的代码。

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 部分。非常感谢您的帮助。 :)

【问题讨论】：

如果你想让它成为标签，你可以对两个输入都做tabindex="1" and tabindex="2"

你可以试试 daterangepicker 这个功能。

您可以在指令的第一个文本框上绑定input 事件，然后将焦点移到第二个文本框上。

我相信这正是我所需要的。 @Jai，请您帮我解决一下绑定输入事件的代码以及如何将焦点移到第二个文本框？

【参考方案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();
        
    );

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

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

【讨论】：

我猜你错过了真正的问题。

@Jai：看起来他想让光标指向第二个文本框。 tabindex 是解决这个问题的好方法。如果我遗漏了什么，请告诉我。

我的理解是：当用户在第一个文本框中选择一个日期时，然后在该事件之后......应该打开第二个输入的日期选择器。没有任何其他事件。

@Jai 这正是我想做的。谢谢

@Jai。谢谢.. 更新答案。