vue3输入后光标自动跳到下一个输入框中

### 解决方案 在 Ant Design Vue 的 `Input` 组件中，当用户尝试从中部位置删除字符时，可能会遇到光标跳转至最后的问题。这种行为通常是由组件内部的状态更新机制引起的，特别是在结合表单验证或其他动态逻辑的情况下。 为了处理这一问题，可以通过监听输入事件并手动调整光标的位置来实现解决方案。以下是具体方法： #### 方法一：通过监听 `@input` 或 `@change` 事件控制光标位置 可以在 `Input` 组件上绑定一个自定义函数，在该函数中保存当前的光标位置，并在状态更新后恢复它[^1]。 ```javascript methods: { handleInput(event) { const target = event.target; const { selectionStart, selectionEnd } = target; this.$nextTick(() => { if (target.setSelectionRange) { target.focus(); target.setSelectionRange(selectionStart, selectionEnd); } }); }, }, ``` 将上述方法绑定到 `Input` 上： ```html <a-input @input="handleInput" /> ``` 这种方法的核心在于利用 `$nextTick` 确保 DOM 更新完成后重新设置光标的范围。 --- #### 方法二：禁用默认的行为并通过受控方式管理值 如果需要更精确地控制输入框的内容变化过程，则可以采用受控组件的方式。即通过 `v-model` 来同步数据，并阻止不必要的重绘操作[^2]。 ```html <template> <a-form :form="form"> <a-form-item> <a-input v-decorator="[&#39;test&#39;, {}]" @input="onInputChange" /> </a-form-item> </a-form> </template> <script> export default { data() { return { form: this.$form.createForm(this), }; }, methods: { onInputChange(e) { const value = e.target.value; const cursorPosition = e.target.selectionStart; // 手动触发校验或修改值的操作 this.form.setFieldsValue({ test: value }); this.$nextTick(() => { e.target.setSelectionRange(cursorPosition, cursorPosition); }); }, }, }; </script> ``` 此方法适用于复杂的场景，比如需要实时验证或者限制用户的输入内容。 --- #### 方法三：使用第三方库辅助定位光标 对于更加复杂的情况，也可以借助一些专门用于处理光标位置的工具类库（如 [caret-pos](https://github.com/DrkSephy/caret-pos)），这些库能够提供跨浏览器兼容的支持[^3]。 安装依赖： ```bash npm install caret-pos --save ``` 引入并使用： ```javascript import CaretPos from &#39;caret-pos&#39;; // 获取光标位置 const pos = new CaretPos(inputElement); this.$nextTick(() => { pos.setTo(pos.get()); }); ``` 这种方式适合那些希望减少重复开发工作量的应用程序开发者。 --- ### 总结 以上三种方法分别针对不同层次的需求提供了灵活的选择。无论是简单的事件拦截还是深入定制化功能都可以找到合适的切入点。最终选择取决于项目实际需求和技术栈偏好。