Angular获取及设置input光标位置_angular 移动光标进入input框-CSDN博客

本文介绍了在Angular组件中如何使用ViewChild和ElementRef获取input元素，以及如何通过selectionStart和setSelectionRange属性来获取和设置光标位置，包括参数解释和注意事项。

文章目录

获取元素
selectionStart获取光标位置下标
setSelectionRange设置光标位置

获取元素

<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