CODEWITHSUNDEEP
angular
Jon Saw
Jon Saw

Reputation: 8102

Angular 2 select text on specific input

With jQuery, we would select all contents of a specific input on-submit this way:

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

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

How do we accomplish this with Angular 2?

Upvotes: 41

Views: 56181

Answers (6)

redevill
redevill

Reputation: 381

A variation on @NobodySomewhere answer (thank you): Same solution in a slightly different context of an input linked to a material autocomplete (documentation here: https://material.angular.io/components/autocomplete/overview)

      <input id="driver"
         type="text"
         placeholder="Search for a Driver"
         onfocus="this.select()"
         (ngModelChange)="setDriver($event)"
         [formControl]="driverAutoComplete"
         [matAutocomplete]="autoDriver">
  <mat-autocomplete #autoDriver="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let driver of filteredDrivers | async" [value]="driver">
      {{driver.fullname}}
    </mat-option>
  </mat-autocomplete>

Upvotes: 2

NobodySomewhere
NobodySomewhere

Reputation: 3225

If you are using mat-input, you can try onfocus="this.select()"

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

Upvotes: 3

Vasyl Kobetiak
Vasyl Kobetiak

Reputation: 311

You can create directive like below and use it where you need:

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[appSelectOnFocus]'
})

export class SelectOnFocusDirective {

  constructor(private elementRef: ElementRef) {
  }

  @HostListener('focus', null) onFocus() {
    this.elementRef.nativeElement.select();
  }
}

Upvotes: 7

pcnate
pcnate

Reputation: 1774

A better idea for focus events is to use the focus event rather than the click event.

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

To focus from inside your component logic you will need to add a few more things

  1. Add a local variable name
<input type="text" #myInput (focus)="$event.target.select()" />
  1. Use ViewChild to access your DOM element
@ViewChild("#myInput") myInputField: ElementRef;
editMyInputField(): void {
  this.myInputField.nativeElement.focus();
}

To trigger the selection programmatically from outside the component you will need to use @Input. Something along the lines of:

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

All this should still be working with Angular 8. I did not test any of this on Angular 2 or 4.

It would get a bit more complicated if you're using dynamic inputs. For such cases, I have used a form as the parent reference rather than declaring many local variables in the component.

Upvotes: 11

Sangmin Lee
Sangmin Lee

Reputation: 149

I figured out a way without using an event listener...

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

Upvotes: 14

Fredrik Lundin Grande
Fredrik Lundin Grande

Reputation: 8186

You can easily do it in the template like this:

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

or add a local variable to your element and reference that instead:

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

The benefit of the second approach is that by setting a local variable name to your element, other elements can reference that variable as well.

Upvotes: 76

Related Questions