element input输入框自动获取焦点的实现

更新时间：2021年10月01日 09:16:12 作者：萝卜砸大坑

本文主要介绍了element input输入框自动获取焦点的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

最近项目中在做表单的时候，需要自动滚动到评论框，并且让评论框自动聚焦，这就需要手动触发输入框的 focus 状态。

但是，element并不支持autofocus属性，那就只能通过原生的js效果获取聚焦效果了

document.getElementById("input").focus();

或者利用vue的ref属性也可以实现聚焦效果：

原理其实很简单，Element 已经提供了 focus 方法，但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性，然后在需要的地方直接调用方法就可以了

<el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>

this.$nextTick(() => {
      this.$refs.input.focus()
    })

注意：一个页面只能有一个聚焦效果

last , vue也支持自定义指令

当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
    // element-ui
    el.children[0].focus()
    // 元素有变化，如show或者父元素变化可以加延时或判断
    setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

参考：vue自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html

到此这篇关于element input输入框自动获取焦点的实现的文章就介绍到这了,更多相关element input输入框自动获取焦点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中如何使用vue-touch插件
这篇文章主要介绍了vue中使用vue-touch插件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
vue3.2 reactive函数问题小结
reactive用来包装一个对象，使其每个对象属性都具有响应性（也就是深层次响应式），这篇文章主要介绍了vue3.2 reactive函数注意点及问题小结,需要的朋友可以参考下
2022-12-12
VUE 记账凭证模块组件的示例代码
这篇文章主要介绍了VUE记账凭证模块组件的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-03-03
vue3中使用sse最佳实践,封装工具详解
这篇文章主要介绍了vue3中使用sse最佳实践,封装工具,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
Vue 指令实现按钮级别权限管理功能
这篇文章主要介绍了Vue 指令实现按钮级别权限管理功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
Vuex实现简单购物车
这篇文章主要为大家详细介绍了Vuex实现简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
vuecli4插件svg-sprite-loader使用svg图标
这篇文章主要为大家介绍了vuecli4插件svg-sprite-loader使用svg图标示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
vue过滤器用法实例分析
这篇文章主要介绍了vue过滤器用法,结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项,需要的朋友可以参考下
2019-03-03
vue mvvm数据响应实现
这篇文章主要介绍了vue mvvm数据响应实现的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-11-11
Vue3+Element Plus进行图片加载优化全攻略
在Web开发中,未优化的图片会导致很多问题,本文将为大家介绍一下Vue3如何通过Element Plus进行图片加载优化,希望对大家有所帮助
2025-03-03

element input输入框自动获取焦点的实现

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具