vue中监听input框获取焦点及失去焦点的问题

2024-11-03 21:49:29

一、背景

博主之前在用vue的获取焦点，失去焦点的时候，出现了@blur和@focus无效的情况。当时百思不得其解。今天又在写vue页面的时候，突然@blur和@focus又好用了。emmmm，看来这部分值得一战。

二、首先是正宗的监听事件的写法

1、html代码

//这是html的输入框。定义了一个获取焦点，失去焦点的方法
 <input placeholder="请输入企业名称" @blur="animateWidth('company_name','blur')" @focus="animateWidth('company_name','focus')" >

2、JS部分

   // 失去焦点和得到焦点的验证方法，name为要验证的字段名,type为blur或focus
    animateWidth(name, type) {
      if (name == "company_name") {
        if (type == "blur") {
          this.companyName.animate = false;
        } else {
          this.companyName.animate = true;
          return;
        }
        if (this.companyName.companyName.trim().length == 0) {
            this.companyName.valid = false;
            this.companyName.message = "请输入企业名称";
            return false;
        }else{
             this.companyName.valid = true;
            return true;
        }
      }
    },

这个方法算是通用的方法，大家在html里面根据自己的需求传不同的值即可。

三、为什么上次监听焦点事件失败呢

1、不好用的原因

博主又去看最初自己用@blur和@focus失败的代码，发现：

  <i-input class="wallet-password-1" size="large"  v-model="counts" refs = "counts" placeholder="0" type="number">
                </i-input>

上次用的html部分是借用i-view框架的，也就是说，我们在使用vue的一些方法的时候，可能会和ui框架定义的方法冲突，这部分参考资料

了解原因之后，我们就知道了，使用vue自带的@blur和@focus是没问题的，如果在你的代码中不起作用，那只能证明一件事，那就是你的UI框架自己定义的有获取焦点失去焦点的方法。建议大家使用UI框架之前，先去官方文档看看，这样会好很多。

2、新增指令的方法

之前百度的时候，看到很多人都说可以通过新增指令来自定义获取焦点失去焦点的方法，具体的可以参考文末内容补充介绍。

补充介绍：vue框架中的表单输入框不支持focus以及blur事件的解决方案

采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例):

1.html引用: v-mtfocus

2.在实例中添加指令

directives: {
    'mtfocus' (el, binding, vnode) {
      let mtinput = el.querySelector('input')
      mtinput.onfocus = function () {
       ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映射到页面
      }
      mtinput.onblur = function () {
        ...//同上理
      }
    }
  }

出现这个问题，说到底还是自己对vue不熟练造成的，姑且记录一下吧。

到此这篇关于vue中监听input框获取焦点，失去焦点的问题的文章就介绍到这了,更多相关vue input框失去焦点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

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框点击后不聚焦问题

目录 input框点击后不聚焦问题 vue input聚焦的坑点击按钮,使某个input框聚焦加载页面时自动聚焦 [坑] input框点击后不聚焦问题废话不多说直接上代码哪个地方要写input框就直接把这一部分代码放上里面双向绑定的值和事件换上自己定义的 <div class="item" @click.stop.prevent="inputPaentClick('input1')"> <input
vue中如何禁止input框和textarea编辑

目录如何禁止input框和textarea编辑第一种方法第二种方法说说input无法输入原因如何禁止input框和textarea编辑在我们开发项目的时候,有时候我们不希望用户对我们的页面进行操作,尤其是输入框之类的,这时候我们需要设置一下第一种方法 <input type="text" v-model="ConList.title" style="width: 100%;outline: none;height: 100%"
vue登录页面设置验证码input框的方法

本文实例为大家分享了vue登录页面设置验证码input框的具体代码,供大家参考,具体内容如下 1.效果 2.代码第一步:建立子组件(举例,文件名可自己取)----代码如下子组件 SIdentify 的完整代码: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="cont
vue实现input框禁止输入标签

目录 vue input框禁止输入标签 vue input框的禁用和可输入 vue input框禁止输入标签 <input type="search" placeholder="请输入内容" v-model="addTypeVal" :maxlength="5"> <script> export default{ watch:{ addTypeVal(val){ let reg = /[^\u0020-
关于Vue3父子组件emit参数传递问题(解决Vue2this.$emit无效问题)

目录 1.解决this.$emit无效问题 2.Vuex问题 3.总结之前写了一篇Vue3路由跳转问题的博客,发现还是有很多同学对基本的使用改变还没有了解,于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是: 1.Vue3中不在强调this的使用,可以说你在setup中完全不能用this,不像Vue2中把全部的内容都集成到this中. 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在(当然Vuex现在可以用没什么变化). 3.如果您有Vue
关于Vue3路由push跳转问题(解决Vue2this.$router.push失效）

目录 1.Vue3.x路由跳转 2.获取参数 3. router-link 4.总结 Vue3.x出来有一阵子了,今天用它的时候发现Vue2中的this.$router.push竟然不能用了!!!!!,真是服了,还得花点时间瞅瞅咋回事,所以.....还是总结下吧 1.Vue3.x路由跳转不要this了,直接引用路由对象,看下图: import router from '@/router/index.js' 用这个路由对象router去push(剩下的和Vue2.x一样) router.push
vue中监听input框获取焦点及失去焦点的问题

目录一.背景二.首先是正宗的监听事件的写法 1.html代码 2.JS部分三.为什么上次监听焦点事件失败呢 1.不好用的原因 2.新增指令的方法一.背景博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况.当时百思不得其解.今天又在写vue页面的时候,突然@blur和@focus又好用了.emmmm,看来这部分值得一战. 二.首先是正宗的监听事件的写法 1.html代码 //这是html的输入框.定义了一个获取焦点,失去焦点的方法 <input pla
解决vue中监听input只能输入数字及英文或者其他情况的问题

如下所示: 1. <input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>. (只能输入数字,英文) <input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'search
详解.vue文件中监听input输入事件（oninput）

.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo
angular 实时监听input框value值的变化触发函数方法

用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页可以实现效果,但是当经过路由跳转后再回到登陆页后,方法就被执行了. 后来经过查找资料,利用angular.js的$watch方法解决了. 代码大概如下: $scope.input = {//初始化,避免ng-model绑定取不到值 Tel:'', Pwd:'' } $scope.$watch('in
React和Vue中监听变量变化的方法

React 中本地调试React代码的方法 yarn build 场景假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果
vue中监听返回键问题

问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpopup事件分析:pushstate 从该方法名我们可以知道是增加某种状态,会为history对象的length增加长度, 点击返回键的时候会触发onpopup事件(可以联想到 pop其实是数组删除的最后一个元素,符合 '栈' 的思想): onpopup触发返回上一页,而 pushstate仅仅是
vue中监听路由参数的变化及方法

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get
vue深度监听(监听对象和数组的改变)与立即执行监听实例

1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是这两个值打印出来却都是一样的,因为它们的引用指向同
vue.js 1.x与2.0中js实时监听input值的变化

一.vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component 变成了这样: ref="myComponent" .绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例. 因为 v-ref 不再是一个指令