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;
    }
  }
}

7 comments:

  1. Great. How do I insert text at the cursor position?

    ReplyDelete
    Replies
    1. use string functions like substr to paste in the new data and then move the cursor too

      Delete
  2. Since the results in Live Casino games largely depend on the dealer’s moves ivip9, many consider such variations to be very fair. The fact that the outcome of a game depends on the actions of a real human makes Live Casino games preferred by many players.

    ReplyDelete
  3. Of course, getting a bad grade is sad, but I'm not sad, because although I couldn't concentrate for long, freepaperwriter com was always there, so I could easily get a very good grade and not be nervous.

    ReplyDelete

Blogroll

Popular Posts