温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue Antd输入框Input自动聚焦的方法是什么

发布时间:2023-04-21 15:52:52 来源:亿速云 阅读:239 作者:iii 栏目:开发技术

今天小编给大家分享一下vue Antd输入框Input自动聚焦的方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

    vue Antd 输入框Input自动聚焦

    1、从vue的实例属性$ref去调input的focus方法使其实现聚焦。

    <a-input type="text ref="ainput" /> 
    <button @click="handleChange"></button>

    2、点击button自动聚焦,或其他事件需要聚焦

    methods:{
        handleChange(){
            this.$nextTick(()=>{
                this.$refs.ainput.focus()
            })
        }
    }

    vue中输入框聚焦,自动跳转下一个输入框

    需求 

    点击请扫描库位,enter键触发后,跳转到下一输入框,然后自动聚焦另外一个输入框上

    vue Antd输入框Input自动聚焦的方法是什么

     <el-input
            v-model="posName"  clearable size="small" placeholder="请扫描库位" 
            class="filter-item"  @keyup.enter.native="jumpInput"
          />
      <el-input
            ref="barcodeMsg" v-model="barcode" clearable size="small"  placeholder="请扫描物料信息"
              class="filter-item" @keyup.enter.native="getSearch('material')"
          />
     // enter键触发
        jumpInput() {
          this.$refs.barcodeMsg.focus(); // 自动获取焦点
        },

    如图

    vue Antd输入框Input自动聚焦的方法是什么

    以上就是“vue Antd输入框Input自动聚焦的方法是什么”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI