当前位置：首页 > news >正文

Vue输入框获取焦点

news 来源：原创 2025/6/18 16:28:12

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();
}