vue input组件如何设置失焦与聚焦

目录
  • vue input组件设置失焦与聚焦
    • 设置聚焦与失焦
  • 回车键让input失焦让下一个input聚焦
    • 代码如下

vue input组件设置失焦与聚焦

我在iview-admin这个后台管理系统中，使用input输入框失焦时触发了一个axios请求，但是，当我从其它页面，携带input输入框的数据进入该页面，进行数据填充的时候发现，数据填充没有问题，但是因为没有触及到失焦事件，所以axios请求没有触发

把失焦事件改为@on-change事件也触发不了，所以我就在接收到其他页面的数据的同时，手动执行了聚焦与失焦事件，代码如下:

这是input输入框的内容：

<Input ref="input" v-model="inputData" @on-blur="inputChange" placeholder="请输入..."/>

设置聚焦与失焦

this.$refs.input.focus();      // 聚焦
 
this.inputData = '111';  // 给输入框赋值
 
this.$refs.input.blur();   // 失焦

当然，在vue给出的官网文档中，也可以指定聚焦的位置，例如：

this.$refs.input.focus({
    cursor: 'start'    // 聚焦在文本的开始位置
});

所以，请具体需求，具体使用。

回车键让input失焦让下一个input聚焦

最近项目中需要一个功能就是在一个input中输入完成后按下回车键自动跳转到下一个input框，让下一个input框自动聚焦

代码如下

**html**
 <el-form
      ref="form"
      :model="form"
    >
      <el-form-item label-width="10px">
        <el-input
          v-model="form.username"
          placeholder="请输入姓名"
          @blur="nextInput()"
          @keyup.enter.native="nextInput($event)"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="10px">
        <el-input
          ref="password"
          v-model="form.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
   </el-form>
**js**
data(){
	form:{
		username:'',
		password:''
	}
}
methods:{
	nextInput (event) {
      if (event) {
        event.target.blur()
        this.$refs.password.focus()
      }
    },
}

这样就可以进行失焦聚焦，如果有多个input框实现方式相同

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue Antd 输入框Input自动聚焦方式

    目录 vue Antd 输入框Input自动聚焦 vue中输入框聚焦,自动跳转下一个输入框 需求 总结 vue Antd 输入框Input自动聚焦 1.从vue的实例属性$ref去调input的focus方法使其实现聚焦. <a-input type="text ref="ainput" />  <button @click="handleChange"></button> 2.点击button自动聚焦,或其他事件需要聚

  • Vue使用antd中input组件去验证输入框输入内容(rules 案例)

    Vue使用antd中input组件去验证输入框输入内容(rules 案例)

    目录 效果图 示例代码 效果图 示例代码 <a-form-model-item prop="phone"> <a-input v-model="form.phone" :maxLength="11" placeholder="手机号" /> </a-form-model-item> <a-form-model-item prop="code"> <a-i

  • Vue Input输入框自动获得焦点的有效方法

    效果:在点击Tab "Material Incoming"的时候,鼠标光标focus在PKG ID的input输入框关键代码是使用 this.$nextTick(()         this.$nextTick(() => {                 this.$refs.pkgId.focus();         }) 注意:仅仅使用 this.$refs.pkgId.focus(); 是不起作用的,需要点击Tab Material Incoming 两次才有效,但

  • Element Input组件分析小结

    input组件相对来说复杂一点,我们先从它用到的一个工具库calcTextareaHeight.js进行分析. calcTextareaHeight.js calcTextareaHeight.js使用来计算文本框的高度的,我们根据代码顺序从上往下进行分析. HIDDEN_STYLE HIDDEN_STYLE是一个常量,存储隐藏时候的css样式的. const HIDDEN_STYLE = ` height:0 !important; visibility:hidden !important;

  • vue综合组件间的通信详解

    vue综合组件间的通信详解

    本文实例为大家分享了vue综合组件间的通信,供大家参考,具体内容如下 实现一个ToDoList. ①完成所有的组件的创建和使用 ②add 点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist) 核心代码:兄弟组件间通信 步骤1:var bus = new Vue() 步骤2:在准备接受数据的组件 bus.$on('addEvent',function(){ }) 步骤3:触发事件 bus.$emit('addEvent',123) 将todolist中数组的元素

  • Vue中封装input组件的实例详解

    Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • vue实现一个获取按键展示快捷键效果的Input组件

    vue实现一个获取按键展示快捷键效果的Input组件

    遇到一个需求,页面内要自定义快捷键,这就需要可以有地方设置和展示快捷键,找了一圈Element UI发现没有能稍微改改就能用的组件,所以自己动手写了一个. 这个只有快捷键展示功能,快捷键实际绑定生效的话是依赖传回的快捷键数据,由另外的组件处理的.目前只测试了Chrome的环境. 效果如下: 关键点 虽然看起来像是一个Input但在组件内实际上是展示一个标签效果,还需要有删除按钮.这就得在输入框内放下html代码,浏览器的Input组件显然不适合,这就只能自己仿一个类Input组件效果了. foc

  • Vue切换组件实现返回后不重置数据,保留历史设置操作

    版权 1.<router-view ></router-view> 外层包围<keep-alive> </keep-alive> keep-alive作用将组件实例缓存下来 <keep-alive> <router-view></router-view> </keep-alive> 2.清除组件缓存 使用keep-alive 的 exclude="组件名" 属性 <keep-alive

  • 在react项目中使用antd的form组件,动态设置input框的值

    问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了 原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if

  • Vue组件如何设置Props实例详解

    目录 属性类型 属性默认值 属性值验证 Composition API 中设置属性 总结 在 Vue 中构建组件通常需要定义一些属性,以使组件可以更好复用,在这种情况下会使用 props 来自定义数据来传递数据.接下来以一个简单的组件来介绍如何使用组件 props . <CrayonAlert title="友情提示" description="请输入真实的信息" /> 如上面代码所示,组件定义两个属性 title 和 description,组件代码如

  • Vue项目中使用iView组件库设置样式不生效的解决方案

    目录 使用iView组件库设置样式不生效问题 解决使用iview或者element-ui组件修改样式不生效 1.样式如果定义为 2.样式如果没有定义 使用iView组件库设置样式不生效问题 找到要设置样式的类名,直接按照下面写法设置就可以了! <style lang="less" scoped> @deep: ~'>>>'; @{deep}.ivu-transfer-operation {     visibility: hidden !important

  • 基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    基于element UI input组件自行封装“数字区间”输入框组件的问题及解决

    目录 问题描述 实现效果 实现代码 问题描述 在开发时遇到一个数字区间输入框的需求,如下图: 项目使用的是vue,组件库用的是element UI,但是element UI并没有提供数字区间组件,只提供了InputNumber 计数器输入框,如果用两个计数器输入框进行拼接也能满足需求,但是样式调试起来太过于复杂且不够灵活,不能令人满意,并且该数字区间输入框在其它界面也有这种需求,于是就在element input输入框的基础上自行封装了一个数字区间组件使用. 实现效果 实现效果如下: 使用方式如

随机推荐