精华内容
下载资源
问答
  • vue input自动获取焦点

    千次阅读 2019-07-29 13:28:31
    1:input添加ref属性 2:使用focus方法 3:使用场景:点击表格中的角色名称或角色代码,input显示,并自动获取焦点

    1:input添加ref属性

    2:使用focus方法

    3:使用场景:点击表格中的角色名称或角色代码,input显示,并自动获取焦点

     

    展开全文
  • 在移动端输入框想自动获取焦点(自动弹出输入法) 我是在 uitls 文件下面 index.js 注册全局的指令 import Vue from ‘vue’ // 注册一个全局自定义指令 v-focus Vue.directive(‘focus’, { // 当被绑定的元素插入...

    在移动端输入框想自动获取焦点(自动弹出输入法)
    我是在 uitls 文件下面 index.js 注册全局的指令

    import Vue from ‘vue’
    // 注册一个全局自定义指令 v-focus
    Vue.directive(‘focus’, {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
    // 聚焦元素
    el.focus()
    }
    })

    在需要的组件中调用 (和data methods 一个级别)
    directives: {
    focus: {
    // 指令的定义
    inserted: function(el) {
    el.focus();
    }
    }
    },

     <input type="text" placeholder="请输入" v-model="message" v-focus/>
    
    展开全文
  • 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="...

     

    <input v-focus type="text" name="search" ref="input" autofocus v-model="inputValue" maxlength="10" @input="handleOnInput()" class="search-inp" placeholder="搜线路">

     

    1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作

    2.Vue官网给出的解决办法

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
      // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })

    //组件注册,与created、mounted同级

    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    }

    //使用方式

    <input v-focus>

     inserted(钩子函数):被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

     3.适合Vue

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

     但是我发现,这些方法都没解决第一次进入页面,input获取不了焦点问题。返回后在进入就能获取焦点了。不知大家有没有更好的解决方法。

    展开全文
  • 原生JS操作DOM 使用mounted钩子函数,它表示页面一加载进来就执行函数里面的...input type="text" v-model='newId' id='inputId'&gt; //vue对象 var vm = new Vue({ el: '#app', data: { newId...
    1. 原生JS操作DOM
    使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)
    
    //html部分
     编号:<input type="text" v-model='newId' id='inputId'>
    //vue对象
    var vm = new Vue({
        el: '#app',
        data: {
          newId: '',    
        },
        // 注意:mounted钩子函数的名字不能随便取,而且它不能写在methods属性。
        mounted () {     
           document.getElementById('inputId').focus()
        }
    
    1. ref方式实现
    //html部分
     编号:<input type="text" v-model='newId' ref='id'>
    //vue对象
    var vm = new Vue({
        el: '#app',
        data: {
          newId: '',    
        },
        mounted () {     
           this.$refs.id.focus();
        }
    
    1. 使用自定义指令
    1.Vue.directive('自定义指令的名字(可以随便取,但是全部小写)',{inserted:function(el,binding){}})
    2. inserted钩子函数,它表示自定义指令插入到标签中的时候就执行
    3. inserted钩子函数有两个参数(el,binding) el表示使用自定义指令的元素,binding表示自定义指令的信息
    
    //html部分
     编号:<input type="text" v-model='newId' v-myfocus>
    //自定义指令
            Vue.directive('myfocus', {
                inserted: function(el, binding) {
                    //console.log(el)
                    el.focus()
                }
            })
    //vue对象
    var vm = new Vue({
        el: '#app',
        data: {
          newId: '',    
        },
    
    展开全文
  • import Vue from 'vue' // 调用时直接在input或textarea标签上添加v-focus指令 Vue.directive('focus', { //全局注册自定义指令 inserted (el) { if (['INPUT', 'TEXTAREA'].indexOf(el.tagName) !== -1) { el....
  • 为了方便输入,需要自动获取焦点,所以加入了autofocus,但是发现,只有第一个并且第一次点击才起作用。 查了网上的一些文档,说是跟dom的渲染顺序和数据的缓存有点儿关系,至于深层次的原因,还没查到,希望有知道...
  • 问题描述:输入框初始状态不展示(v-show: false),点击按钮后展示... 解决方案:应该是dom未渲染前,执行了focus,所以导致聚焦失败。用vue的$nextTick()即可解决。原理是dom渲染完成后,才会执行其中的回调 ...
  • Vue.directive('focus', { inserted (el, binding, vnode) { // 聚焦元素 el.focus() } }) 【普通input的自定义指令使用】:v-"+指令名" // index.vue <input v-focus placeholder="因为有v-focus,所以我...
  • vueinput 输入框自动获取焦点

    千次阅读 2020-04-24 17:06:14
    页面初始就自动获得焦点 2\ 代码实现 <template> <div> <el-input v-model="plate" type="number" id="plateInput" placeholder="请输入搜索关键字"></el-input> </div> </...
  • 前言   在项目开发的过程中需要用到input框,限定input框中只能输入数字,当界面一显示的时候input框获得焦点,并调...获取焦点 <input v-focus type="number" /> methods中的方法 thisFocus(){ $('#Inp...
  • 先简单说一下需求:左侧是tree结构,右侧是表单,实现功能就是点击tree节点,对应的右侧input获取焦点 注册自定义指令  指令可以是全局注册也可以是局部注册,看你自己的想法喽,我这块是实现的全局注册   ...
  • 为了实现自动唤起键盘,再点击写评论之后会出现input框紧接着吊起键盘 最开始的用法: 在input出现之后加上 this.$nextTick(() => { this.$refs.input.focus() }) 为了页面的其他功能,我在上述代码之后重新...
  • vue element.ui中input自动获取焦点

    万次阅读 2019-06-28 16:34:21
    vue element.ui中input自动获取焦点 需求:element-ui中使el-input标签自动获取焦点 解决方法 HTML: // 使用自定义指令 v-focus <el-input v-focus size="small" v-model="scope.row.comment" placeholder="请...
  • vue自动获取焦点

    千次阅读 2019-08-09 10:45:03
    directives: { focus: { inserted: function (el, {value}) { console.log(el,{value}) if (value) { ...<el-input v-focus='true' @focus="qqqq(xxx)" @blur="rrrr(xxxx)"></el-input>
  • 我们需要input输入框自动获取焦点 我们可以通过以下代码实现 使用自定义指令 v-focus <template> <el-input v-focus v-model="scope.row.comment" placeholder="请输入内容" @input="onInput"></el-...
  • <!... <... <head> ...meta charset="utf-8">...script src="js/vue.js"></script> <style> </style> </head> <body> <div id = "app"> <p>页面载入时.
  • 实现这样一个功能:在点击input框后弹出popover,在popover里面有一个建议输入框,弹出popover后建议输入框自动获取焦点。 如图,建议输入框自动获取焦点显示出列表数据: 代码如下: placement="bottom...
  • Vue 中使用input和el-input自动获取焦点的问题 在vue中,普通<input />和<el-input></el-input>自动获取焦点可以使用自定义指令来实现。 一、普通<input>的自定义命令使用方法 1、现在入口...
  • 在使用 iview 的 render 渲染函数时,我们动态生成的 Input 输入框,自动获取焦点时,只能第一次获取到焦点,我们可以使用原生的 js 获取焦点,使用ref 无效,原因未知。 render:(h,params)=>{ if( params.row.$...
  • 我们做vue项目,一般会封装一些常用的组件,今天我就把我自己封装的搜索框分享给大家,样式简洁漂亮,点击搜索,input输入框会自动获取焦点。如下图所示 html部分 <template> <div class="search_box"&...
  • 在main.js中 Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { ...el-input v-focus/> 二、局部注册 在vue文件的options中 directives: { focus:
  • input v-focus type="text" autofocus placeholder="请输入..." v-model="searchVal" class="input-search"> import Vue from 'vue' Vue.directive('focus', { inserted: function (el) { consol...
  • 需求说明:点击搜索按钮出现input框,并自动使input框聚焦。 如图所示: 实现方式1:利用vue的ref html代码如下: &lt;input ref="inputVal" class="searchInp" type="text" v-...
  • template <!-- 增加标签 对话框 --> <a-modal :title="ModalText" :visible="visible" :confirm-loading="confirmLoading" ...a-input size="large" placeholder="请填写···" v-mode
  • autofocus是vueinput的原生属性,element也支持这种方法, 但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。 解决方案: 借助动态绑定ref属性,在this.$nextTick...
  • vue ios上面输入框自动获取焦点

    千次阅读 2020-04-07 21:07:52
    直接上代码,解决方法如下 this.$nextTick(()=>{ this.$refs.inputs.focus() })
  • Vue input 框 删除输入内容 自动获取焦点 <template> <input ref='id' v-model="msg" id="searchMT" placeholder="输入汉字搜索..." > <div @click="deleteci">删除</div> </template...
  • //directives与data同级directives: { focus: { inserted: function (el, {value}) { console.log(el,{value}) if (value) { ...然后在input上添加你编写的自定义指令,如图
  • Vue中输入框自动获取焦点的三种方式 方式一:原生JS操作DOM 方式二:ref方式实现 方式三:使用自定义指令 main.js中 vue文件中

空空如也

空空如也

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

vueinput自动获取焦点

vue 订阅