精华内容
下载资源
问答
  • 我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点,请看附件,已经正常使用。 请放心下载
  • document点开弹框1点开弹框2取 消确 定取 消确 定var app = new vue({el: '#app',data() {return {id: 'ssssss',dialogvisibleone: false, // 弹框显示隐藏dialogvisibletwo: ...打开第一个弹框 自动获取焦点*/open...
    document

    点开弹框1

    点开弹框2

    取 消

    确 定

    取 消

    确 定

    var app = new vue({

    el: '#app',

    data() {

    return {

    id: 'ssssss',

    dialogvisibleone: false, // 弹框显示隐藏

    dialogvisibletwo: false,

    one: '',

    two: ''

    }

    },

    methods: {

    /**

    * 打开第一个弹框 自动获取焦点

    */

    openone() {

    this.dialogvisibleone = true // 1. 让弹框显示

    this.$nexttick(() => { // 2. 弹框显示dom更新完成后 获取refs.ref1 设置焦点

    console.log(this.$refs.ref1)

    this.$refs.ref1.focus() // 设置焦点

    })

    },

    /**

    * 打开第二个弹框 获取焦点

    */

    opentwo() {

    this.dialogvisibletwo = true

    this.$nexttick(() => {

    this.$refs.reftwo.focus()

    })

    }

    },

    /**

    * 自定义指令 让打开页面先获取焦点

    */

    directives: {

    focus: {

    // 指令的定义

    inserted: function (el) {

    el.focus()

    }

    }

    }

    })

    展开全文
  • 1、vue当中如何通过一个点击事件使一个input显示的同时获取焦点2、如何在使用blur()事件取消这个焦点 (ios是好的,但是安卓点击其他位置不取消焦点)针对获取焦点的问题:1、autofocus 好使但是仅仅是第一个好使,...

    1、vue当中如何通过一个点击事件使一个input显示的同时获取焦点

    2、如何在使用blur()事件取消这个焦点 (ios是好的,但是安卓点击其他位置不取消焦点)

    针对获取焦点的问题:

    1、autofocus 好使但是仅仅是第一个好使,其他的就不能用了

    2、directives: {

    focus: {

    inserted(el, { value }) {

    if (value) {

    el.focus();

    }

    },

    },

    },

    拓展它的focus

    通过点击事件让focusStatus变成true也不好使

    3、this.$refs.input.focus();同样不好使

    所以就不知道怎么办了

    我是通过vue-cli初始化的项目

    如上图所示,点击图二变成图一所示,在图一所示的input框显示的同时进行聚焦,这个解决一下午了实在是做不了。

    还有一个问题是图一有焦点的时候安卓点击空白区域,焦点不消失怎么办?ios是好的。

    希望有经验的给解决一下~~万分感谢~!

    展开全文
  • 定义了一个获取焦点,失去焦点的方法 <input placeholder="请输入企业名称" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" > 2、JS部分 ...

    一、首先是正宗的监听事件的写法

    1、html代码

    //这是html的输入框。定义了一个获取焦点,失去焦点的方法
     <input placeholder="请输入企业名称" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" >
     

    2、JS部分

     // 失去焦点和得到焦点的验证方法,name为要验证的字段名,type为blur或focus
        animateWidth(name, type) {
          if (name == "company_name") {
            if (type == "blur") {
              this.companyName.animate = false;
            } else {
              this.companyName.animate = true;
              return;
            }
            if (this.companyName.companyName.trim().length == 0) {
                this.companyName.valid = false;
                this.companyName.message = "请输入企业名称";
                return false;
            }else{
                 this.companyName.valid = true;
                return true;
            }  
          } 
        },
     

    这个方法算是通用的方法,大家在html里面根据自己的需求传不同的值即可。

    二、为什么上次监听焦点事件失败呢

    1、不好用的原因

    博主又去看最初自己用@blur和@focus失败的代码,发现:

    <i-input class="wallet-password-1" size="large"  v-model="counts" refs = "counts" placeholder="0" type="number">
                    </i-input>

    上次用的html部分是借用i-view框架的,也就是说,我们在使用vue的一些方法的时候,可能会和ui框架定义的方法冲突。这部分参考博客:
    https://segmentfault.com/q/1010000011021884

          了解原因之后,我们就知道了,使用vue自带的@blur和@focus是没问题的,如果在你的代码中不起作用,那只能证明一件事,那就是你的UI框架自己定义的有获取焦点失去焦点的方法。建议大家使用UI框架之前,先去官方文档看看,这样会好很多。

    2、新增指令的方法

          之前百度的时候,看到很多人都说可以通过新增指令来自定义获取焦点失去焦点的方法,具体的可以参考博客:
    https://blog.csdn.net/weixin_42011096/article/details/80764182

    展开全文
  • 直接上代码吧- 动态数据,动态获取,动态焦点--ohye{{ product.title }} - {{ product.price | currency }}type="text":value='product.title':ref='"nnnn"+product.id'@keyup.enter="(e)=>doneEdit('nnnn'+...

    直接上代码吧- 动态数据,动态获取,动态焦点--ohye

    • {{ product.title }} - {{ product.price | currency }}

      type="text"

      :value='product.title'

      :ref='"nnnn"+product.id'

      @keyup.enter="(e)=>doneEdit('nnnn'+product.id)"

      >

      :disabled="!product.inventory"

      @click="addProductToCart(product)">

      Add to cart

    const allproducts = [

    {"id": 1, "title": "iPad 4 Mini111", "price": 500.01, "inventory": 2},

    {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10},

    {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5}

    ]

    import { mapGetters, mapActions } from 'vuex'

    export default {

    computed:{

    products:function(){ return allproducts}

    },

    methods:{

    doneEdit:function(refid){

    let dom=this.$refs[refid][0];

    dom.parentNode.nextElementSibling

    && dom.parentNode.nextElementSibling.childNodes[3].focus()

    },

    ...mapActions([

    'addProductToCart',

    ])},

    beforeCreate(){

    console.log('生命周期');

    },

    created () {

    this.$store.dispatch('getAllProducts')

    }

    }

    展开全文
  • Vue中自动获取input焦点

    万次阅读 热门讨论 2018-09-03 11:24:36
    input v-focus type="text" name="search" ref="input" autofocus v-model="inputValue" maxlength="10" @input="handleOnInput()" class="...
  • 一个组件里面用v-for 遍历出了多个input框,按钮只有一个,如何点击按钮,根据参数0,1,2,3。根据参数来让对应的第几个input获取焦点
  • vue input自动获取焦点

    千次阅读 2019-07-29 13:28:31
    1:input添加ref属性 2:使用focus方法 3:使用场景:点击表格的角色名称或角色代码,input显示,并自动获取焦点
  • 博主之前在用vue获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候,突然@blur和@focus又好用了。emmmm,看来这部分值得一战。 二、首先是正宗的监听事件的...
  • vueinput获取焦点

    2019-09-20 13:50:24
    vueinput获取焦点通过vue的...通过vue的ref来给input获取焦点 HTML 部分 <input ref="loginName" placeholder="请输入账号" maxlength="20" type="text" v-model="logonForm.loginName"/> <button @clic...
  • vue默认input获取焦点

    千次阅读 2019-03-29 15:28:49
    vue默认input获取焦点 html: <input ref='gain' type="text" v-model="mesnum"/> js:必须有外层 this.$nextTick( () =>{ this.$refs.gain.focus() })
  • 需求弹窗打开时某个 el-Input 获取焦点,使用了 this.$refs['name'].focus() 无效。 查询资料后发现问题出在这里: 因为ref本身是作为渲染结果被创建的,在渲染的时候是不能访问的,因为他们还不存在! 如果此时...
  • vue input 输入框自动获取焦点

    千次阅读 2020-04-24 17:06:14
    页面初始就自动获得焦点 2\ 代码实现 <template> <div> <el-input v-model="plate" type="number" id="plateInput" placeholder="请输入搜索关键字"></el-input> </div> </...
  • input标签获取焦点事件 2、onblur(常用) input失去焦点事件(触发条件:先获取焦点,再失去焦点触发) 3、onchange input失去焦点并且它的value值发生变化时触发 4、oninput input框输入过程value值改变时实时...
  • 朴实无华的获取焦点的方法,希望有更好的方法可以分享给我,谢谢! <input type="text"ref="inputVal" @blur="test"autofocus="autofocus"> methods:{ test(){ this.$refs.inputVal.focus(); } }
  • 这篇文章主要介绍了vue 表单输入框不支持focus及blur事件的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例):1.html引用: v-...
  • Problem Description点击rename的时候...DOM操作可以直接设置focus,但是Vue里不建议进行DOM操作,大家有什么好办法吗Code//history.vuev-for="item in notes"class="historyitem":class="{haha: activeNote===item...
  • // 给table 循环的input 点击的时候获取焦点 // 1、给input 设置ref 属性 <el-input v-else ref="refInput" @blur="(scope.row.code = !scope.row.code), changeBlur()" v-model="scope.row[item.prop]" :...
  • 实现方式1:利用vue的ref html代码如下: &lt;input ref="inputVal" class="searchInp" type="text" v-model="searchVal" placeholder="搜索标题或内容..." ...
  • 前言   在项目开发的过程需要用到input框,限定input只能输入数字,当界面一显示的时候input框获得焦点,并调...获取焦点 <input v-focus type="number" /> methods的方法 thisFocus(){ $('#Inp...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...div id=".
  • 原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)1//html部分编号://vue对象var vm = new Vue({el: '#app',data: {newId: '',},// 注意:mounted钩子函数的名字不...
  • 一、失去焦点 demo 1 关键 @blur <input v-model="testVal" @blur="test"></Input> methods: { test(){ console.log('testVal------------- ',testVal) } } 第二种 关键 @blur.native.capture &...
  • vueinput 指令 获取焦点

    万次阅读 2018-07-11 10:52:12
    &lt;li v-for="(i,k) in roleList" :key="...el-input v-model="i.vRoleName" v-if='i.isEdit' v-on:blur="i.isEdit=false"  v-focus="{ cls: 'e
  • 以 antd vue 为例 主要就是这句代码: proxy.$refs.input.select(); 其实就是调用select()方法 <template> <a-input ref="input" v-model:value="newFileName" /> <div class="add_file" @click=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,895
精华内容 2,358
关键字:

vue中input获取焦点事件

vue 订阅