Angular 2 выберите текст на конкретном входе

С помощью jQuery мы выберем все содержимое определенного ввода для отправки следующим образом:

<form id="target">
  <input id="input-1" type="text" value="some value" />
<form>

$("#target").submit((event) => {
  event.preventDefault();
  $("#input-1").select();
});

Как это сделать с помощью Angular 2?

Ответ 1

Вы можете легко сделать это в шаблоне следующим образом:

<input type="text" (click)="$event.target.select()" />

или добавьте локальную переменную в ваш элемент и ссылку, а вместо этого:

<input type="text" #myInput (click)="myInput.select()" />

Преимущество второго подхода заключается в том, что, устанавливая локальное имя переменной для вашего элемента, другие элементы также могут ссылаться на эту переменную.

Ответ 2

Я понял способ, не используя прослушиватель событий...

<form id="target">
  <input id="input-1" #input-1 type="text" value="some value" />
<form>

component.ts

@ViewChild('input-1') inputOne: ElementRef;

selectInput() {
  const inputElem = <HTMLInputElement>this.inputOne.nativeElement;
  inputElem.select();
}

Ответ 3

Лучшая идея для событий фокуса - использовать событие фокуса, а не событие щелчка.

<input type="text" (focus)="$event.target.select()" />

Чтобы сосредоточиться на логике вашего компонента, вам нужно добавить еще несколько вещей

Добавить имя локальной переменной

<input type="text" #myInput (focus)="$event.target.select()" />

Используйте ViewChild для доступа к элементу DOM

@ViewChild("#myInput") myInputField: ElementRef;
editMyInputField(): void {
  this.myInputField.nativeElement.focus();
}

Чтобы запустить выбор программно из-за пределов компонента, вам нужно будет использовать @Input. Что-то вроде:

@Input() set myInputFocus() {
  this.editMyInputField();
}

Все это по-прежнему должно работать с Angular 8. Я не проверял ничего из этого на Angular 2 или 4.

Было бы немного сложнее, если вы используете динамические входы. Для таких случаев я использовал форму в качестве родительской ссылки, а не объявлял многие локальные переменные в компоненте.