如何获取焦点

都说focus()可以让元素获取焦点，但为何在vue中对input元素使用这个方法却始终不行呢？

因为Vue是先处理数据,再重绘Dom,这中间有个时间差。所以你focus()需写在Vue的生命周期钩子onUpdated中(当这个钩子被调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作);

对应代码如下:
Vue

<template>
    <input  ref="inputRef" />
</template>

<script lang='ts'>
import {onUpdated, ref} from 'vue';

export default {
 
  setup(props, context) {
    const inputRef = ref(null);
    onUpdated(() => {
        inputRef.value.focus()
    });
   
    return {  inputRef, };
  }
};
</script>

获取焦点后的问题

经过上述代码操作后，输入框终于可以获取焦点了，但效果上还有瑕疵：

如图所示，聚焦之后内容是处于全选状态，而我想实现的效果是，聚焦之后光标自动定位到最后一个字的后面，像这样：

接下来就看下具体实现方式：

设置光标在内容最后

这里需要用到input上的setSelectionRange(start,end)函数来设置光标位置, 入参两个参数必传，值为数字，分别代表光标开始位置和结束位置。

举例来说： 第一个字符左边的位置记作0，第一个字符和第二个字符中间的光标位置记为1，后续以此类推。

如果设置的两个数字不相等，则功能是用鼠标选中两个位置之间的文本。 而如果两个数字相等，则表示将光标定位到这个固定位置。

这里我的需求是把光标定位在最后面，因此将光标的开始位置和结束位置的值设置成输入框内容的长度就可以了。

完整代码为：

Vue

<template>
    <input  ref="inputRef" />
</template>

<script lang='ts'>
import {onUpdated, ref} from 'vue';

export default {
 
  setup(props, context) {
    const inputRef = ref(null);
    
    onUpdated(() => {
        const inputDom = inputRef.value; 
        const contentLen = inputDom.value.length; 
        inputDom.focus(); 
        inputDom.setSelectionRange(contentLen, contentLen);
    });
    return {  inputRef, };
  }
};
</script>