Angular获取及设置input光标位置

文章目录

获取元素

<input #myInput (input)="onInput()" type="text">

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  ...
})
export class YourComponent {
  @ViewChild('myInput', {static: false}) myInput: ElementRef;
}

selectionStart获取光标位置下标


  onInput() {
    const cursorPosition = this.myInput.nativeElement.selectionStart;
    console.log('光标位置：', cursorPosition);
  }

setSelectionRange设置光标位置

this.myInput.nativeElement.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);

参数介绍：

  • selectionStart: 被选中的第一个字符的位置索引, 从 0 开始。如果这个值比元素的 value 长度还大，则会被看作 value 最后一个位置的索引。
  • selectionEnd: 被选中的最后一个字符的下一个位置索引。如果这个值比元素的 value 长度还大，则会被看作 value 最后一个位置的索引。
  • selectionDirection：选择方向。forward/backward/none