Question

我正在创建一个时间输入文本字段，其中您将使用填入的时间覆盖零。当删除填入的数字时，数字将替换为零。

更改绑定文本时，光标将移动到文本的末尾，然后使用setSelectionRange方法将光标设置回应放置的位置。

我正在尝试将光标放置在文本的末尾，以使光标不会弹跳，但是我似乎找不到找到禁用此行为的方法。

有人可以帮助我更好地了解光标的行为以及如何禁用它的移动吗？

我试图创建一个不带零的时间输入字段，但是每当我在其他地方填写数字时，最后一个字符就会出现跳动的光标。

在我的示例中，每次按键时我都会在文本字段中添加一个。在被代码放置之前，您可以看到光标移至字段的末尾。

[小提琴] https://jsfiddle.net/Banthornes/c6zds1h4/1/

this.text = this.text + '1'

if(this.cursorLocation > 0)
{
    this.cursorLocation -= 1
}

this.$refs.input.setSelectionRange(this.cursorLocation, 
     this.cursorLocation)

我在以下浏览器中对此进行了测试： -镀铬 -火狐 -勇敢 -边缘

Answer 1

呼叫setSelectionRange时，输入尚未更新。

将通话置于setSelectionRange中的setTimeout上。您甚至可以放弃使用$nextTick，但是在这些情况下，setTimeout通常更可靠。

setTimeout( ()=>{

if(this.cursorLocation > 0)
{
    this.cursorLocation -= 1
}

this.$refs.input.setSelectionRange(this.cursorLocation, 
     this.cursorLocation)


}, 500 )

使用VueJ时是否可以禁用默认光标放置？

1 个答案: