更新模型对象后尝试在文本框中设置光标位置

Question

我想在更改模型对象后设置光标位置，但它实际上试图在更新文本框的值之前设置光标位置。

HTML:

    <input type="text" name="test" id="test" [(ngModel)]="myString">
    <button type="button" (click)="updateText('testStr')">

TS:

    myTextBox: HTMLInputElement;

    ngOnInit() {
    this.myTextBox = document.getElementById('test');
    }

    updateText(str:String){
    this.myString+=str;
    this.myTextBox.focus();
    this.myTextBox.setSelectionRange(2,2);
    }

这样，因为它试图在实际更新文本之前设置光标位置，所以它只能focus()。但是，如果我不将任何内容绑定到文本框并通过执行 this.myTextBox.setAttribute('value',str); 然后 focus() 并调用 setSelectionRange 来更新其文本，它就可以工作。我该怎么办？

Answer 1

试试这个：

updateText(str:String){
    this.myString+=str;
    setTimeout(()=>{
        this.myTextBox.focus();
        this.myTextBox.setSelectionRange(2,2);
    },0);
}

更新模型对象后尝试在文本框中设置光标位置

Trying to set the cursor position inside a textbox after updating the model object

textbox

cursor-position

ngmodel

angular