vue中让input框自动聚焦

  created(){
   this.changfouce();
  },
  methods: {
    //在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中,
    //因为created()钩子函数执行的时候DOM并未进行任何渲染,而此时进行DOM操作是徒劳的,所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。
    changfouce(){
    this.$nextTick((x)=>{   //正确写法
       this.$refs.inputs.focus();
    })
     this.$refs.inputs.focus(); //错误写法

    },

原文地址:https://www.cnblogs.com/huanhuan55/p/10043816.html

时间: 2024-09-30 12:43:56

vue中让input框自动聚焦的相关文章

解决:Vue中给input框手动赋值,视图却不更新

如下示例: <a-form layout="vertical"> <a-row :gutter="16"> <a-col :span="24"> <a-form-item label="名称"> <a-input v-model="helloForm.name" placeholder="请输入名称"/> </a-form

vue中,点击button按钮后,页面上的input框自动聚焦

需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率 开始尝试了几种方法都没有成功 一.首先想到的用vue指令 v-focus,然而没有成功 <Input v-model="book.isbnOrIssn" @change.native="_getIsbn" @blur="_getIsbn" :disabled="snDisabled" v-focus placeholder

iscroll中使用input框的话是导致无法选中input框

在使用iscroll的移动端的时候如果在iscroll中使用input框的话是导致无法选中input框 原因:iscroll需要一直监听用户的touch操作,以便灵敏的做出对应效果,所以它把其余的默认事件屏蔽了. iscroll.js源码: onBeforeScrollStart: function (e) { e.preventDefault(); }, 更改: onBeforeScrollStart: function (e) { var target = e.target; while (

vue中控制input获取焦点

遇到一个任务需要实现直接点击内容来编辑,光标离开Input就保存内容 点击内容实现下面这种获取点击表格内input光标 我找了下,有ref和自定义指令两种,我选了比较适合的ref来操作 ref在循环外和循环中被获取到的是两种状态,当有多个ref相同时,通过this.$refs.ref获取循环外的ref只会获取到最后一个元素,在循环中会获取到所有相同ref元素的数组. 所以我给了所有input相同的ref再通过点击使用index来使目标input获取焦点:this.$refs.ref[index]

Vue中-下拉框可以选择可以填写

<el-form-item label="方法名称"> <el-autocomplete popper-class="my-autocomplete" v-model="customForm.MethodName" :fetch-suggestions="querySearchMethod" placeholder="请输入方法名称" :disabled="IsDisabled&

vue中对element的弹框messagebox的二次封装

在vue中对确认框的二次封装 使用场景:在页面中做某些需要警告的操作时的弹框提示 1.在utils文件夹下新建一个confirm.js文件来对messageBox的封装,内容如下: /** confirm.js */ import { MessageBox } from 'element-ui' export function handleCofirm(text = '确定执行此操作吗?', type = 'warning') { return MessageBox.confirm(text,

关于input框的兼容性问题

在H5横行的移动互联网时代中,兼容性的问题往往被大家所遗忘.可以说微软都已经放弃了IE,自然大家也都不是特别关心这些问题.但是客户却不会这么想,因为使用浏览器,浏览网站的人,太多了,以至于甚至于有人使用xp系统,ie6这样的低端版本.为了给用户更好的体验,我们只有选择迁就. 废话说了不少了,下面进入正题. 最近在项目中遇到input框的兼容性问题,经过多方实验,最终解决,特地记下来,以备以后查看,同时方便大家解决问题. 正常input框的css样式,例如: input{display:block

input框中自动展示当前日期 yyyy/mm/dd

直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input框中自动展示当前日期</title> </head> <body> <input type="text" id="input"> <script>

vue中v-for出来的input如何实现双向绑定

vue中v-for出来的input如何实现双向绑定 vue v-for通过index动态绑定input输入框的数据 原文地址:https://www.cnblogs.com/hool/p/12571753.html