vue 让input输入框主动失去焦点的办法_vue主动失去焦点-程序员宅基地

技术标签: vue  

让input输入框主动失去焦点

在开发中发现输入框输入数据后直接隐藏,在同位置显示别的输入框的时候,会自动聚焦。解决这种情况可以让输入框主动失焦。
1.首先监听input框的input事件

<input
   maxlength="6"
   placeholder="请输入验证码"
   type="tel"
   v-model="verification"
   @input="complete"
 />

2.在methods里面定义方法

methods: {
    
 complete(e) {
    
    if(this.verification.length>=6) {
    
      e.srcElement.blur(); // 让输入框主动失焦
    }
  },
}

ps: 我的需求是在输入完6位验证码后会隐藏当前输入框,然后显示另一个输入框,然后就会出现自动聚焦的问题。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/aiyang1214878408/article/details/118572879

智能推荐

黑马程序员-------self-程序员宅基地

文章浏览阅读279次。1. 成员变量和局部变量同名? 当成员变量和局部变量同名时,采取就近原则,访问的是局部变量? 用self访问成员变量,区分同名的局部变量2. 使用细节1) 出现的地方:所有的OC方法中(对象方法\类方法),不能出现在函数2) 作用? 使用 "self->成员变量名" 访问当前方法调用的成员变量#import @interface Pe

获得中文的unicode编码_怎么获得中文unicode-程序员宅基地

文章浏览阅读1.3k次。获得一个字符的unicode编码str.decode(‘utf-8’)Code Example:>>> '王'.decode('utf-8')u'\u738b'_怎么获得中文unicode

SpringBoot启动流程详解-程序员宅基地

文章浏览阅读72次。2019独角兽企业重金招聘Python工程师标准>>> ..._springboot#++#elements additionalelements = of(elementvalue).elements;

OpenCV入门学习资料汇总-程序员宅基地

文章浏览阅读73次。OpenCV学习文档资料OpenCV学习:1)OpenCV中文网站——http://wiki.opencv.org.cn/index.php/%E9%A6%96%E9%A1%B52)python实现OpenCV学习:https://blog.csdn.net/u011321546/article/category/7495016问题issue 总结:Ip..._opencv入门资料

10本Java网站开发必看书籍,大神级别必修书籍,吐血推荐!!!_有关网站开发的书籍推荐csdn-程序员宅基地

文章浏览阅读1.1k次。1:《java并发编程从入门到精通》推荐理由:从入门讲到精通的,网络安全,网络并发的好书。《Java并发编程从入门到精通》作者结合自己10多年Java并发编程经验,详细介绍了Java并发编程的基础概念、工作原理、编程技巧和注意事项,对Java高性能高并发编程有极大的参考价值。《Java并发编程从入门到精通》内容包括并发编程概念,线程,线程安全,线程集合类,线程阀,线程池,Fork/Jo..._有关网站开发的书籍推荐csdn

BaseDao Java利用反射技术原生实现BaseDao<T>,自动拼装SQL语句-程序员宅基地

文章浏览阅读1.2k次,点赞4次,收藏7次。Java利用反射技术原生实现BaseDao,自动拼装SQL语句这里我用了注解+反射首先声明三个注解:import java.lang.annotation.Documented;import java.lang.annotation.ElementType;import java.lang.annotation.Inherited;import java.lang.annotation.R..._basedao

随便推点

vs2019的安全检查、万能头文件问题_vs2019导入万能头文件-程序员宅基地

文章浏览阅读338次。①在我的电脑中检索newc++file.cpp,然后打开后加入下面这句话,再ctrl+s保存,这样每次新建一个项目开头都会自动加上这句#define _CRT_SECURE_NO_WARNINGS 1②这个方法最简便https://www.cnblogs.com/pgzhang/p/9072217.html..._vs2019导入万能头文件

错误 C2660: Gdiplus::GdiplusBase::operator new: 函数不带三个参数_c2660错误-程序员宅基地

文章浏览阅读3.6k次。在使用 GDI + 的 Microsoft 基础类 (MFC) 应用程序的调试版本时, 可能会出现类似于以下内容的错误消息: 错误 C2660: Gdiplus::GdiplusBase::operator new: 函数不带三个参数 原因:在调试版本中_c2660错误

天气系统3------微服务_cityid=101280803-程序员宅基地

文章浏览阅读266次。之前写到 通过封装的API 已经可以做到使用redis进行缓存天气信息但是这一操作每次都由客户使用时才进行更新 不友好 所以应该自己实现半小时的定时存入redis 使用quartz框架 首先添加依赖build.gradle中// Quartz compile('org.springframework.boot:spring-boot-starter-quartz'..._cityid=101280803

Spring boot 使用数据库Yaml 配置文件模板_ymal配置database-platform-程序员宅基地

文章浏览阅读880次。JPA配置文件模板spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/db_test?useSSL=true&useUnicode=true&characterEncoding=utf8&serverTimezo..._ymal配置database-platform

adaptiveThreshold函数_adaptivethreshold c++-程序员宅基地

文章浏览阅读2.7k次。adaptiveThreshold函数函数作用:运用自适应阈值分割对图像进行处理函数调用形式:C++: void adaptiveThreshold(InputArray src, OutputArray dst, doublemaxValue, int adaptiveMethod, int thresholdType, int blockSize, double C_adaptivethreshold c++

Appium-Android:三种等待时间设置方法_androiddriver设置等待时长-程序员宅基地

文章浏览阅读1.1k次。一、前言学习Appium过程中,记录三种等待时间的设置方法整理网上资料后梳理完成二、等待类型1. 强制等待需要设置固定的等待时间,无论元素是否加载完成,均需等待该时间由time.sleep()方法实现不推荐使用import timetime.sleep(5) # 固定此段等待时间为5s2. 隐式等待隐式等待是由webdriver提供的超时等待方法;impli..._androiddriver设置等待时长