Question

使用jQuery，我们将以这种方式选择特定输入的所有内容：

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

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

我们如何使用Angular 2实现这一目标？

Answer 1

您可以在模板中轻松完成此操作：

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

或向元素添加局部变量并引用它：

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

第二种方法的好处是通过为元素设置局部变量名，其他元素也可以引用该变量。

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

Answer 3

您可以创建如下所示的指令，并在需要的地方使用它：

INSERT INTO T1  select S from T3 where T3.S NOT IN (SELECT S from T2 UNION select S from T1);

Answer 4

关于焦点事件的一个更好的主意是使用焦点事件而不是单击事件。

<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上进行任何测试。

如果您使用动态输入，它将变得更加复杂。对于这种情况，我使用一种形式作为父引用，而不是在组件中声明许多局部变量。

Answer 5

如果你使用的是 mat-input，你可以试试 onfocus="this.select()"

<input matInput onfocus="this.select()">

Angular 2选择特定输入

5 个答案: