angularjs - Välj texten inuti ett inputfält med Typescript i Angular 2

Jag försöker göra exakt det som beskrivs i det här inlägget, men i Angular2.

Använd i princip JavaScript-funktionen .setSelectionRange(start, end); i ett inputfält efter att en användare klickar på en trigger. Jag kan inte hitta något sätt att replikera detta beteende med TypeScript.

Tack i förväg.

Svar #1

Jag kan inte hitta något sätt att återskapa detta beteende med Typescript.

TypeScript är bara JavaScript. Jag misstänker att du menar Angular2 (det inlägget är Angular1).

Angular2

Du behöver få tag på DOM-elementet (vilket verkar vara det du har problem med). I din controller behöver du injicera ElementRef. T.ex. @Inject(ElementRef) elementRef: ElementRef,

När du har elementet kan du traversera det och göra vilken DOM-åtkomst/manuell manipulation du behöver göra.

Mer

Docs : https://angular.io/docs/js/latest/api/core/ElementRef-class.html

Exempel

Exempel: https://stackoverflow.com/a/32709672/390330

import {Component, ElementRef} from 'angular2/core';

@Component({
  selector:'display',
  template:`
  <input #myname (input) = "updateName(myname.value)"/>
  <p> My name : {{myName}}</p>
`
})
class DisplayComponent implements OnInit {
  constructor(public element: ElementRef) {
    this.element.nativeElement // <- your direct element reference 
  }
  ngOnInit() {

  }
}

Svar #2

Detta exempel på kodrad visar själva kärnan i att välja texten (med .name som en ElementRef-referens):

this.name.nativeElement.setSelectionRange(0, 999);

Här är alla nödvändiga delar sammanfogade (samt att fokusera på inmatningen) för ett "namn"-fält:

Visa :

<input name="name" formControlName="name" type="text" [(ngModel)]="data.name">

Komponent :

export class MyComponent {
  @ViewChild('name') name: ElementRef; // * see security comment below for ElementRef
  @Input() data: {name: 'Foo Baz'};
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl()
    });
  }

  // call this to give the field focus and select its text
  focusAndSelectNameFieldText(){
    if (!this.name) return;
    this.name.nativeElement.focus();
    setTimeout(() => {
      this.name.nativeElement.setSelectionRange(0, 999);
    });
  }
}

*Var noga med att din användning av ElementRef inte utgör en säkerhetsrisk: https://stackoverflow.com/a/44509202/442665

Relaterade artiklar