6

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?

Jus10
  • 14,519
  • 21
  • 52
  • 77

3 Answers3

31

Seems the following should work:

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

Example

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • Indeed it does! ty – Jus10 Jan 13 '18 at 20:40
  • 2
    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. – Curtis Oct 03 '19 at 15:07
8

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

<input matInput onfocus="this.select()">
NobodySomewhere
  • 2,997
  • 1
  • 16
  • 12
1

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

Jialzate
  • 315
  • 1
  • 6