Question

我无法专注于input（位于click / focus上的框上，而是专注于压光机弹出窗口。当我按Tab或单击ngbDatePicker输入框时，它会打开calendar，并将焦点放在今天的日期（或选择的日期）上。结果，它不允许我用键盘输入日期。

但是，即使日历打开了，我也要聚焦输入框，以便我可以直接键入日期。

我尝试通过javascript进行聚焦，但是它不起作用。

<input
    id="dateOfBirthInput"
    type="text"
    class="form-control"
    placeholder="Datepicker"
    name="date_of_birth"
    [(ngModel)]="user.date_of_birth"
    ngbDatepicker
    required
    [minDate] = "minDate"
    #dob="ngbDatepicker"
    (click)="dob.open();"
    (focus)="dob.open();"
/>

我尝试从角度组件中打开日期选择器，但是它不起作用。

<input
    id="dateOfBirthInput"
    type="text"
    class="form-control"
    placeholder="Datepicker"
    name="date_of_birth"
    [(ngModel)]="user.date_of_birth"
    ngbDatepicker
    required
    [minDate] = "minDate"
    #dob="ngbDatepicker"
    (click)="focusDateOfBirthInput();"
    (focus)="focusDateOfBirthInput();"
/>

//component code
@ViewChild("dob") dob: NgbDatepicker;

focusDateOfBirthInput() {
    console.log("focusDateOfBirthInput");
    document.getElementById("dateOfBirthInput").focus();
    console.log(this.dob);
    this.dob.open()
}

任何帮助将不胜感激。

Answer 1

我已经找到一种解决方法来实现您想要的效果，请尝试以下操作：

使用这样的构造函数注入渲染器，并从中导入 @ angular / core

constructor（私有渲染器：Renderer）
然后像这样更新您的输入元素：

说明：我已经采用了另一个名为“ inputRef”的输入引用，并将其作为ViewChild放在component.ts文件中。

通过“ ViewChild”获取输入元素的引用，并使用settimeout实现方法

@ViewChild（'inputRef'）inputRef; 构造函数（私有渲染器：Renderer）{ }

focusOnInput（datePickerRef）{ datePickerRef.open（）; setTimeout（（）=> { this.renderer.invokeElementMethod（this.inputRef.nativeElement，'focus'）; }，10） }

宾果游戏，我尝试并测试过，它将正常工作。

Answer 2

您可以这样做：

public change(el,dael){
  dael.open();
  setTimeout(function(){
    console.log(el);
    el.focus()
  },500);

}

<input
    id="dateOfBirthInput"
    type="text"
    (click)="change($event.target,dob);"
    (focus)="change($event.target,dob);"
    class="form-control"
    placeholder="Datepicker"
    name="date_of_birth"
    [(ngModel)]="user.date_of_birth"
    ngbDatepicker
    required
    [minDate] = "minDate"
    #dob="ngbDatepicker"
    
/>

NgbDatePicker：专注于输入框

2 个答案: