Angular Material Input Select All on Click?

Question

Pretty straight-forward question. When I click on an input field I want to select-all the text so when I start typing it over-writes what was previously there. Anyone know how to do this?

Beatty

Answer 1

Seems the following should work:

<input matInput (click)="$event.target.select()">

Example

Tampere

Indeed it does! ty – Beatty

I realize the question asked specifically for when someone "clicks" on it... but I think it would be better to do with on focus: (focus)="$event.target.select()" That way if you are clicking around inside the field to move a cursor you wont end up re-selecting everything. – Completion

Answer 2

What worked best for me is onfocus="this.select()"

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

Gilligan

Answer 3

If you are using angular material 1.x, you can use md-select-on-focus

<md-input-container>
  <label>Auto Select</label>
  <input type="text" md-select-on-focus>
</md-input-container>

This link can help you md-select-on-focus

Juniper

FYI: This is AngularJS, Angular2 does not have this – Pomegranate