Question

我正在创建一个动态组件，并在ngAfterViewInit上完成了以下代码：

setTimeout(() => {
  this.input.nativeElement.focus();
}, 0);

这有效：它将焦点正确地设置在输入上，但是光标位于值的开头。我想将光标放在值的末尾。

我已经尝试过了：

setTimeout(() => {
  this.input.nativeElement.focus();
  let start = this.input.nativeElement.selectionStart;
  let end = this.input.nativeElement.selectionEnd;
  this.input.nativeElement.setSelectionRange(start,end);
}, 0);

我也曾尝试清除该值并将其重置，但无法使其正常工作。

这里有html以及我如何访问它：

<input class="nav-editor__input" #input type="text">

@ViewChild('input') input: ElementRef;

有什么想法吗？

Answer 1

使用Angular反应形式时，它是开箱即用的。这是example。

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <h1>Focus Test!</h1>
    <input #testInput type="text" [formControl]="formCtrl">
  `
})
export class AppComponent implements OnInit, AfterViewInit {
  name = 'Angular';

  @ViewChild("testInput") testInput;

  formCtrl = this.fb.control('');

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.formCtrl.setValue('Test');
  }

  ngAfterViewInit() {
    this.testInput.nativeElement.focus();
  }
}

在ngAfterViewInit()中设置焦点，将光标置于输入值的末尾。

这里是example，没有活动表格。

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Focus Test!</h1>
    <input #testInput type="text" [value]="value">
  `
})
export class AppComponent implements OnInit, AfterViewInit {
  name = 'Angular';

  value = '';

  @ViewChild("testInput") testInput;

  constructor() {}

  ngOnInit() {
    this.value = 'Test';
  }

  ngAfterViewInit() {
    this.testInput.nativeElement.focus();
  }
}

似乎也可以立即使用。但是，无论如何，Angular Reactive Forms是一种幸福。

将光标放在焦点上的输入字段的值的末尾|角度2

1 个答案: