首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在vue中输入失去焦点时执行函数

在Vue中,可以通过使用自定义指令或监听事件的方式来实现在输入框失去焦点时执行函数。

  1. 使用自定义指令:
    • 创建一个自定义指令,在指令的bind钩子中绑定失去焦点事件和相应的函数,然后在unbind钩子中解绑事件。
    • 在需要使用的输入框上添加该指令。
    • 示例代码如下:
    • 示例代码如下:
    • 优势:通过自定义指令可以实现全局复用,方便管理和维护。
    • 应用场景:适用于多个输入框需要在失去焦点时执行相同操作的情况。
    • 推荐的腾讯云相关产品:无
  • 监听事件:
    • 在输入框上添加@blur事件,并绑定相应的函数。
    • 示例代码如下:
    • 示例代码如下:
    • 优势:简单易用,适用于少量输入框需要执行特定操作的场景。
    • 应用场景:适用于单个输入框需要在失去焦点时执行特定操作的情况。
    • 推荐的腾讯云相关产品:无

请注意,以上示例中的yourFunction代表你需要执行的函数名称,你可以根据自己的实际需求来定义和实现该函数。对于腾讯云相关产品,可根据具体业务需求自行选择适用的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

组件化详细

原因:Vue 是异步更新DOM (提升性能) 解决方案 nextTick:等 DOM更新后,才会触发执行此方法里的函数体**语法: **this.nextTick(函数体) this....,输入框获取焦点 (2) 失去焦点,隐藏输入框 (3) 回显标签信息 (4) 内容修改,回车 → 修改标签信息 实现双击显示输入框, 并且获取输入框的焦点 首先, 双击显示输入框, 我们可以通过双点击事件...dblclick="handleClick"实现,然后在实现的函数 通过使v-if的内容为true, 实现点击显示输入框 获取输入框的焦点可以有两种方式: 方式一: 通过双击, 然后在其中的函数里通过...来向选择的, 所以如果想要失去焦点, 可以直接将if的信息修改即可。...-- (1) 双击显示输入框,输入框获取焦点 (2) 失去焦点,隐藏输入框 (3) 回显标签信息 信息是由外部父组件传入的 (4) 内容修改,回车 → 修改标签信息 --

18010
  • Vue一个案例引发的动态组件与全局事件绑定总结

    城市列表选择组件 首先说说我们要实现一个什么样的城市选择组件: 输入框获取焦点,显示组件 点击城市列表更新输入框的城市显示 点击其他空白处组件隐藏 在切换到其他组件,选择的城市保留而不是被重置 ?...下面我们就一步一步的来拆解 第一步 输入框获取焦点后显示组件很简单,我们给输入框绑定焦点事件然后给组件传入一个显示的状态即可,我们把 isShowCityList 传递给城市选择组件控制行为。...第三步 需要我们去点击其他地方城市组件被隐藏,有些同学的第一印象可能是利用 input 的 blur 事件(就是失去焦点事件),只要我们的 input 失去焦点,我们就隐藏。...其实我的第一印象也是如此,但是我们绑定的是 input 的失去焦点事件以后,当我们选择城市列表的时候也是 input 失去焦点的时候,所以我们就无法选取城市。显然这种思路是不行的。...所以这里我们只能去用到 Vue 的全局事件的绑定,然后去进行一个判断我们点击的节点是哪里,如果是城市组件以外我们就进行隐藏操作。 我们在 mounted 钩子函数,进行如下操作。

    1K20

    Vue一个案例引发的动态组件与全局事件绑定总结

    城市列表选择组件 首先说说我们要实现一个什么样的城市选择组件: 输入框获取焦点,显示组件 点击城市列表更新输入框的城市显示 点击其他空白处组件隐藏 在切换到其他组件,选择的城市保留而不是被重置 [city-list-init.gif...] 下面我们就一步一步的来拆解 第一步 输入框获取焦点后显示组件很简单,我们给输入框绑定焦点事件然后给组件传入一个显示的状态即可,我们把 isShowCityList 传递给城市选择组件控制行为。...第三步 需要我们去点击其他地方城市组件被隐藏,有些同学的第一印象可能是利用 input 的 blur 事件(就是失去焦点事件),只要我们的 input 失去焦点,我们就隐藏。...其实我的第一印象也是如此,但是我们绑定的是 input 的失去焦点事件以后,当我们选择城市列表的时候也是 input 失去焦点的时候,所以我们就无法选取城市。显然这种思路是不行的。...所以这里我们只能去用到 Vue 的全局事件的绑定,然后去进行一个判断我们点击的节点是哪里,如果是城市组件以外我们就进行隐藏操作。 我们在 mounted 钩子函数,进行如下操作。

    1.5K00

    Vue原理】VModel - 源码版之input详解

    当composing=true,事件回调不会走到下面的更新操作,而 Vue 正式通过这个标志位,判断现在是否是预输入而确定是否需要实时更新 首先,Vue 会为 input 或者 textarea 绑定以下事件...,会触发 在预输入延迟更新起什么作用呢?...表单 绑定 input 事件,让 input 如果你设置延迟更新,就是相当于你改变了内容,然后失去焦点才触发 --- v-model.trim、v-model.number 如果你给 v-model...给个动图看好吧 [image] [image] 我设置了 trim,然后输入的时候,故意多加几个空格,然后失去焦点(触发设置的 blur),再点发现空格不见了。...因为失去焦点之后被强制更新了一波 嗯,这就是 $forceUpdate 的作用,把页面上的显示值也过滤一遍 [公众号]

    93620

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    一、案例需求 实现如下效果 , 默认状态下 , 表单显示灰色提示字体 , 点击表单输入内容是黑色字体的 ; 二、案例核心要点 1、获取焦点事件 - onfocus 事件 在 JavaScript ,...当 DOM 元素 获得焦点 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素 一般都是 input 表单元素 ; : 当 用户 点击输入框 或 通过键盘切换到输入...}); 2、失去焦点事件 - onblur 事件 在 JavaScript , 当 DOM 元素 失去焦点 , 该 DOM 元素上绑定的 onblur 事件被触发 ; : 用户从 输入框 移动到...'; } 2、执行效果 默认状态 , 显示如下样式 , input 表单 显示 " 请输入搜索内容 " 字体是黑色的 ;...鼠标点击 表单 , 此时 灰色的字体 消失 , 表单显示光标 ; 此时输入内容显示的是黑色字体 ; 完整的执行效果如下 : 四、开关灯案例 1、案例需求 实现如下开关灯效果 : 2、核心要点 -

    10410

    移动端H5 input输入完成后页面底部留白问题

    说明 最近在用vue写几个H5页面在微信上展示,遇到一个在弹窗上input输入完成之后点击键盘的完成,页面底部留出一片空白的问题 [20190521155136.png] 出现原因分析 当键盘抬起,window.scrollY...会从0变到键盘的高度,所以解决办法就是当input失去焦点的时候,将window.scrollY重新设置为0 解决 给所有的input``textarea组件设置获取焦点和设置焦点事件,失去焦点的时候将...window.scrollY`设置为0 因为的是vue所以结合vue来写代码 <input class="m-input" :value="value" @input="$emit...,判断定时器是否存在如果存在的话清除掉(上一个input设置的定时器) <em>失去</em><em>焦点</em>事件,将window.scrollY设置为0,并且给一个10的定时器,减少页面<em>失去</em><em>焦点</em>的突兀感(为了顺滑一点点) destroyed...<em>vue</em>组件<em>中</em>如果使用了定时器,一定要记得在组件销毁的生命周期里将清时期清除掉,防止全局定时器过多,容易爆栈 补充:解决方案2 在input上分别增加focus和blur的方法,基本可以解决键盘回落后留白问题

    1.2K20

    做好内容安全检测,和风险说「再见」!(上)

    本文将为您详细说明,如何在小程序对一段文本进行合法内容检测,以判断是否含有违法违规内容。...onFocus() { console.log('聚焦焦点'); }, // 失去焦点 onBlur(event) { console.log("失去焦点");...// 前端可进行手动的弱校验,也可以在失去焦点发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云资源的,其实在发布时候与失去焦点做校验两者都可以 }, // 发布...}) } 至于是在失去焦点事件发送请求还是在点击发送按钮发送请求,两种方式都可以。...如果是放在失去焦点就立马请求,这样请求次数会增多,而放在点击发送按钮进行校验,一定程度上可以减少小程序端频繁请求。

    1.3K10

    移动端H5 input输入完成后页面底部留白问题

    input输入完成之后点击键盘的完成,页面底部留出一片空白的问题 ?...出现原因分析 当键盘抬起,window.scrollY会从0变到键盘的高度,所以解决办法就是当input失去焦点的时候,将window.scrollY重新设置为0 解决 给所有的input``textarea...组件设置获取焦点和设置焦点事件,失去焦点的时候将“window.scrollY`设置为0 因为的是vue所以结合vue来写代码 <input class="m-input" :...,判断定时器是否存在如果存在的话清除掉(上一个input设置的定时器) 失去焦点事件,将window.scrollY设置为0,并且给一个10的定时器,减少页面失去焦点的突兀感(为了顺滑一点点) destroyed...vue组件如果使用了定时器,一定要记得在组件销毁的生命周期里将清时期清除掉,防止全局定时器过多,容易爆栈 补充:解决方案2 在input上分别增加focus和blur的方法,基本可以解决键盘回落后留白问题

    87220

    小程序-云开发-如何对敏感词进行过滤即内容安全的检测(下)

    作者 | 随笔川迹 ID | suibichuanji 前言 撰文:川川 您将在本文中学习另外一种方式如何在小程序对一段文本进行检测是否含有违规内容 云函数中进行简单的配置一下,就可以实现文本内容的校验...小程序端进行文本内容的弱校验,减少API的请求 如何将涉及违规的文本内容用*号代替,进行过滤处理 云函数调用方式的优点(推荐使用) 本文重点在于 学会如何在小程序云开发的云函数后端进行配置,实现文本内容的校验...onFocus() { console.log('聚焦焦点'); }, // 失去焦点 onBlur(event) { console.log("失去焦点");...onBlur(event) { console.log("失去焦点"); // 前端可进行手动的弱校验,也可以在失去焦点发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云资源的...onFocus() { console.log('聚焦焦点'); }, // 失去焦点 onBlur(event) { console.log("失去焦点");

    3K10

    todomvc项目_reactive vue

    ‘’:‘s’ 7.不可以输入空数据,用trim()判空,如果trim后没有则返回原来的样子,如果有值则把它传在id+1的位置,内容传到content。最后将输入框自动清空。...如果想要保存的话可以点击enter键 或者使编辑框失去焦点。即可保存。在点击与失去上加上一个事件。先进行判空,在保存,再把编辑页面去掉。这样就实现了一整个编辑的大动作。...12.全局获取焦点设置当进入到这个页面后自动获取输入框的焦点,无需手动点击后获取焦点。 设置全局指令。...Vue.directive() 局部指令:当进入编辑框也无需手动再次点击才能获取焦点,设置局部指令directives:{} 13.路由状态切换。...14.数据持久化:无论你保存与否,退出与否,你输入过的数据都会存在这个页面,不会丢失,即使重新运行该代码。

    1.1K00

    vue要点记录(待更新)

    计算属性只有在它的相关依赖发生改变才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。...在官方的示例,使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。 这是计算属性无法做到的。...动态绑定class和style以及使用组件如何添加动态class 自动添加前缀 当 v-bind:style 使用需要特定前缀的 CSS 属性 transform ,Vue.js 会自动侦测并添加相应的前缀...为什么在-HTML-监听事件 表单控件绑定 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。 ? ? ?...v-model修饰符 不加.lazy就是在input输入或退格,对应的数据就跟着改变(input事件); 加.lazy就是当输完后,input失去焦点,对应数据进行改变(change事件)。 ?

    1.4K30

    JavaScript(十二)

    事件处理程序 ---- 事件就是用户或浏览器自身执行的某种动作。 click、load 和 mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件监听器)。...UI(User Interface,用户界面)事件,当用户与页面上的元素交互触发 焦点事件,当元素获得或失去焦点触发 鼠标事件,当用户通过鼠标在页面上执行操作触发 滚轮事件,当使用鼠标滚轮(或类似设备...)触发 文本事件,当在文档输入文本触发 键盘事件,当用户通过键盘在页面上执行操作触发 UI 事件 UI 事件指的是那些不一定与用户操作有关的事件。...有以下 4 个焦点事件: blur: 在元素失去焦点触发 focus: 在元素获得焦点触发 focusin: 在元素获得焦点触发。...这个事件与 HTML 事件 focus 等价,但它冒泡 focusout: 在元素失去焦点触发。

    2.9K20

    做好内容安全检测,和风险说「再见」!(下)

    函数调用方式的优点解析(推荐使用)。 本文重点在于: 学会如何在小程序云开发的云调用进行配置,实现文本内容的校验。...onFocus() { console.log('聚焦点'); }, // 失去焦点 onBlur(event) { console.log("失去焦点"); // 前端可进行手动的弱校验...,也可以在失去焦点发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云请求的,其实在发布时候与失去焦点做校验两者都可以 }, // 发布 send() { // 请求msgSecChec2...onBlur(event) { console.log("失去焦点"); // 前端可进行手动的弱校验,也可以在失去焦点发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云资源的...onFocus() { console.log('聚焦焦点'); }, // 失去焦点 onBlur(event) { console.log("失去焦点"); // 前端可进行手动的弱校验

    1.2K10

    小程序-云开发-如何对敏感词进行过滤即内容安全的检测(上)

    作者 | 随笔川迹 ID | suibichuanji 前言 撰文:川川 您将在本文中学习到如何在小程序对一段文本进行检测是否含有违法违规的内容 遇到涉及敏感文本问题,以及接入内容安全的校验 具体有哪些应用场景...onFocus() { console.log('聚焦焦点'); }, // 失去焦点 onBlur(event) { console.log("失去焦点");...// 前端可进行手动的弱校验,也可以在失去焦点发送请求进行文本的校验,但是每次失去焦点就请求一次,这样是消耗云资源的,其实在发布时候与失去焦点做校验两者都可以 }, // 发布...,那么直接调用一下就可以了的 避免写重复的代码的 至于是在失去焦点事件发送请求还是在点击发送按钮发送请求,两种方式都可以 您也可以自定义文本校验,而我个人觉得在小程序端,失去焦点,可以自定义做一些常规敏感词的弱校验...,而在点击发送按钮,做强校验 如果是放在失去焦点就立马请求,这样请求次数会增多,而放在点击发送按钮进行校验,一定程度上可以减少小程序端频繁请求.下面是将请求云函数的部分代码抽离出去了的 // 发布

    3.7K10

    JS如何为表单聚焦控件设置醒目的样式

    /js/26-set-form-style/) 原生Js实现 如下是简易的示例代码,要想实现这一个效果,必须要知道onfocus和onblur,前者是聚焦的回调事件,而后者是控件失去焦点的回调 在一个网页里...,永远都只能有一个控件获得焦点,因此需要遍历所有的控件,为它们定义相同的onfocus以及onblur的逻辑 当控件获得焦点,为它设置独特的边框样式,否则就恢复原有的边框样式 function init...this.style.border = '1px solid red'; } e.onblur = function() { // 失去焦点的回调...<input type="text" v-model="name" autocomplete="off" placeholder="请<em>输入</em>名字...版本实现,都需要使用onblur(input框<em>失去</em><em>焦点</em>)与onfocus(input框聚焦<em>焦点</em>),实现的核心原理都是相似的,只是在框架里去控制,表现形式有些不一样

    7.2K50
    领券