Vue输入框获取焦点

1. 元素未渲染完成

如果你在组件挂载或数据更新后立即调用 focus()，可能元素还未渲染到 DOM 中，导致 focus() 失效。

解决方法：确保在元素渲染完成后再调用 focus()。可以使用 nextTick 确保 DOM 更新完成。

2. ref 未正确绑定

确保 ref 正确绑定到目标元素上。

<input ref="waybillNumberRef" /> 3. 元素不可聚焦

不是所有 HTML 元素都支持 focus() 方法。确保目标元素是 input、textarea、button 等可聚焦元素。

如果目标元素是 div 或其他不可聚焦元素，可以为其添加 tabindex 属性：

<div ref="waybillNumberRef" tabindex="-1"></div> 4. 元素被隐藏或禁用

如果目标元素被 display: none 或 visibility: hidden 隐藏，或者被 disabled 禁用，focus() 会失效。

解决方法：确保元素可见且未被禁用。

5. 异步操作未完成

如果 focus() 依赖于异步操作（如数据加载），确保在异步操作完成后再调用 focus()。 例如：

 

<el-input             ref="waybillNumberRef"             v-model.trim="queryParams.expressCode"             placeholder="请输入运单号"             clearable             style="width: 240px"             @keyup.enter="waybillNumbeKeyup"             :disabled="false"           /> <el-form-item> <el-button type="primary" plain @click="replacingWaybill" :disabled="pageData.id == undefined" >更换运单</el-button > const { proxy } = getCurrentInstance(); import { ref } from "vue"; // 更换运单点击 function replacingWaybill() { // 运单号输入框获取焦点 proxy.$refs.waybillNumberRef.focus(); }