We can select content of HTML element using element.select(). But onmouseup action the selected text by script will be deselected. So we have to disable onmouseup action.
Source Code       DEMO


<input (focus)="selectAllContent($event)" (mouseup)="$event.preventDefault()" value="sample value"/>

Script - app.component.ts

Observe below selectAllContent function
import { Component } from '@angular/core';
  selector: 'my-app',
  template: `
   <h4>Focus to select text</h4>
   <input (focus)="selectAllContent($event)" (mouseup)="$event.preventDefault()" value="sample value"/><br>
export class AppComponent {
  selectAllContent($event) {

1 comment:

  1. In Angular 2, selecting the content of a textbox on focus is a common user experience enhancement. This functionality can be achieved by using event bindings and the select method, typically within a (focus) event handler. When a user clicks or tabs into the textbox, the (focus) event is triggered, allowing you to call a method that uses ViewChild to reference the textbox element and then apply the select method to highlight its content. i will do your homework small but effective feature can greatly improve user interaction and make it easier for them to modify or replace the existing text in the textbox. It's a simple yet valuable addition to your Angular application's user interface.



Popular Posts