Get Cursor Position From Text Area Using Angular 2

Tuesday, 11 October 2016 | Posted by
Input fields will have selectionStart property. By default it will be current cursor position. By using this property we can get current cursor position

Markup

Here on click on textarea and keyup on textarea will trigger getCaretPos function. This function passes Textarea element too.
<textarea rows="4" #myTextArea (click)="getCaretPos(myTextArea)" (keyup)="getCaretPos(myTextArea)" cols="40" >Sample Text Here, Place cursor here</textarea>

Script

Here we read selectionStart property as cursor position
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <h2>Cursor Position : {{caretPos}}</h2>
  <div>
    <textarea rows="4" #myTextArea (click)="getCaretPos(myTextArea)" (keyup)="getCaretPos(myTextArea)" cols="40" >Sample Text Here, Place cursor here</textarea>
  </div>
  `
})
export class AppComponent {
  caretPos: number = 0;

  getCaretPos(oField) {
    if (oField.selectionStart || oField.selectionStart == '0') {
       this.caretPos = oField.selectionStart;
    }
  }
}
Labels:

5 comments:

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts