精华内容
下载资源
问答
  • Vue输入框自动获取焦点的三种方式 方式一:原生JS操作DOM 方式二:ref方式实现 方式三:使用自定义指令 main.js中 vue文件中

    Vue中输入框自动获取焦点的三种方式

    方式一:原生JS操作DOM

    <template>
      <div class="focusDemo">
        <input type="text" v-model="username" id='inputId'/>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          username: ''
        }
      },
      mounted () {
        document.getElementById('inputId').focus()
      }
    }
    </script>
    

    方式二:ref方式实现

    <template>
      <div class="focusDemo">
        <input ref="inputName" type="text" v-model="username" />
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          username: ''
        }
      },
      mounted () {
        this.$nextTick(() => {
          this.$refs.inputName.focus()
        })
      }
    }
    </script>
    

    方式三:使用自定义指令
    main.js中

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

    vue文件中

    <template>
      <div class="focusDemo">
        <input type="text" v-model="username" v-focus />
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          username: ''
        }
      }
    }
    </script>
    
    展开全文
  • element input输入框自动获取焦点

    万次阅读 2019-10-25 14:25:40
    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态。 但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了 document....

    博客地址:http://www.globm.top/blog/1/detail/43
    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 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

    展开全文
  • 1.输入框自动获取焦点 <input ref="myInput" type="text"> 标签就这么写,主要在于ref这个属性,然后在js里面写上代码 this.$refs.myInput.focus(); 这样就会自动获取焦点了,不过有一点需要注意 **...

    这里我用vue项目来讲,具体可以根据自己项目去修改

    1.输入框自动获取焦点

    <input  ref="myInput" type="text">
    

    标签就这么写,主要在于ref这个属性,然后在js里面写上代码

    this.$refs.myInput.focus();
    

    这样就会自动获取焦点了,不过有一点需要注意
    **注意:**js里面的代码,一定要确保input输入框标签被渲染出来了再执行,必要时可以这么写

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

    this.$nextTick就是在标签渲染后才执行里面的代码

    2.判断输入框是否获取焦点了

         var myInput = $('#J__wcEditor');
            if (myInput == document.activeElement) {
               console.log('获取焦点');
             } else {
               console.log('未获取焦点');
          }
    
    
    展开全文
  • 场景:为了更好的用户体验,用户未填写数据做校验时候直接获取焦点,减少用户点击操作 原生JS操作DOM实现 使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似) //html部分 ...

    场景:为了更好的用户体验,用户未填写数据做校验时候直接获取焦点,减少用户点击操作

    原生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()
    }

    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.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: '',
    },

     

    展开全文
  • 直接上代码,解决方法如下 this.$nextTick(()=>{ this.$refs.inputs.focus() })
  • 页面初始就自动获得焦点 2\ 代码实现 <template> <div> <el-input v-model="plate" type="number" id="plateInput" placeholder="请输入搜索关键字"></el-input> </div> </...
  • /* 自定义全局指令:获取输入框焦点 */ Vue.directive('focus', { inserted: function (el) { return el.focus() } })
  • 1、私有指令语法: directives:{ 'focus(指令名称)':{ bind(el) {}, inserted(el,binding){}, updated(el) {}, }, } ...input type="text" v-model="id" name="id" v-focus>...注意:在定义...
  • 在移动端输入框自动获取焦点(自动弹出输入法) 我是在 uitls 文件下面 index.js 注册全局的指令 import Vue from ‘vue’ // 注册一个全局自定义指令 v-focus Vue.directive(‘focus’, { // 当被绑定的元素插入...
  • 2.在选项mounted获取要操作的dom元素this.$refs.ref属性值 (mounted :页面加载完成后自动调用) var vm = new Vue({ el:"#app", data:{ }, methods:{ }, mounted(){ this.$refs.input.focus(); } }); ....

空空如也

空空如也

1 2 3 4
收藏数 69
精华内容 27
关键字:

vue输入框自动获取焦点

vue 订阅