vue监听输入框获取焦点

最新推荐文章于 2024-07-25 10:10:07 发布
最新推荐文章于 2024-07-25 10:10:07 发布
阅读量4k 收藏 5
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44869344/article/details/106266896
版权

想实现一个当搜索框获取到鼠标的焦点时就跳转到另一个页面去搜索的功能。前提是得监听到当搜索框获取到焦点。

<van-search
  v-model="value"
  placeholder="请输入搜索关键词"
  @focus="focus"
/>
</form>

这里用到了vantUI的搜索框，@focus是获取焦点，@blur失去焦点。接下来是监听方法

methods: {
    focus() {
        this.$toast('hhh');
    },
    },

当鼠标点击搜索框时就会出现提示框

貂貂啊
关注
专栏目录
uniapp - 手动设置 input / textare 输入框焦点并将光标移到末尾，也支持 uview 组件库 u-input 输入框 / u-textarea 文本域（全平台兼容的通用解决方案）
王佳斌
07-21 5729
uniapp小程序h5网页安卓苹果app设置input输入框textare多行输入框的焦点，uniapp设置输入框input焦点，uniapp手动实现让input文本框聚焦，uniapp如何让输入框input手动聚焦，uni-app输入框手动设置焦点，input手动获取焦点，uniapp input自动聚焦，uniapp每次手动让input输入框获取焦点，uniapp自动获取焦点并将光标移到末尾，uniapp 给textarea多行文本框设置获取焦点，uniapp获取输入框焦点后怎么把光标移到最后，unia
Vue - 实现搜索框获取焦点时下方显示一个 div 容器，点击 input 输入框时底部出现下拉框容器，当失去焦点时底部容器隐藏（仿造类似百度搜索框效果，可做下拉提示搜索或热门推荐等功能）
王佳斌
10-16 1630
vue2，搜索框，element ant design vue2全局搜索框，vue网站网页项目，vue搜索框点击出现下方容器，vue搜索框获得焦点后下方出现div推荐，vue2如何实现点击搜索框时下方出现容器，vue element搜索框激活时底部显示其他内容，vue实现类似百度搜索框功能效果，vue2仿百度搜索框详细教程源码代码，input搜索框获得focus焦点时下方显示额外容器，input输入框获取焦点下面显示内容,失去焦点隐藏内容，vue输入框激活时显示下拉容器，Vue实现input输入框下拉搜索提
Vue实现文本框自动获取焦点
龘
12-21 752
<div> <input type="text" v-model="inputValue" @keydown.enter="add"> <span @click="shaix" style="cursor: pointer;">筛选</span> <h3>正在进行({{noList}})</h3> <div> <div v-for="(item,index) in list" ...
vue js 点击按钮为当前获得焦点的输入框输入值
qq_34157798的博客
10-25 1125
VUE js 点击按钮为当前获得焦点的输入框输入值 使用mousedown方法，可以阻止页面将焦点转移到按钮上 <el-button @mousedown.native="entrySymbol($event,'+')">+</el-button> 获取当前拥有焦点的输入框或文本域，并为其赋值 //输入符号 entrySymbol(e, symbol) { //取消失去焦点事件 e.preventDefault() //获
ref在Vue和React中获取组件或DOM元素引用的方法
最新发布
学习笔记分享给大家
07-25 188
使用van-search的autofocus属性，只在第一次进入页面或刷新时能自动聚焦。
Vue的@focus和@change
鲨鱼辣椒灬的博客
05-30 2万+
@focus:一般是更新下拉框,每次打开会请求后端方法 @change:就是你要联动的方法 作者：ll594317566 来源：CSDN
扫码枪 监听数据，无焦点获取
05-27
扫码枪 监听数据，无焦点获取
vue实现输入框自动跳转功能
10-15
接着获取当前和下一个输入框的DOM元素，通过`event.keyCode`判断用户是按了回退键还是其他键，根据按键行为进行焦点转移。此外，根据输入框的索引更新变量`num1`到`num6`，在所有输入框填满后，组合成一个字符串并...
vue 简单自动补全的输入框的示例
11-30
`v-model`指令用于双向绑定输入框的值，`@keyup.enter`监听回车键事件触发搜索方法，`@blur`则监听输入框失去焦点（鼠标离开输入框）时执行的模糊（`blur`）方法。 `v-show`指令用于动态控制匹配建议列表的显示与...
vue input输入框失去焦点
08-29
- *2* [vue中监听input框获取焦点，失去焦点的问题](https://blog.csdn.net/LJFPHP/article/details/83545958)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
Vue 截取字符串与input 自动获取焦点！
weixin_45844542的博客
03-26 191
Vue input 框 删除输入内容 自动获取焦点 <template> <input ref='id' v-model="msg" id="searchMT" placeholder="输入汉字搜索..." > <div @click="deleteci">删除</div> </template> export default { data() { return {
扫码枪可以实现无焦点捕获扫码输入
08-13
v1.0 扫码枪可以实现无焦点捕获扫码输入，并上传数据服务。 1、 分为免费版和注册版： 免费版上传数据有限制。每次可上传20条数据，每天可上传200条数据，总共可上传60000条数据 注册版没有限制 2、 本软件不记录保存上传任何信息。 3、 其它说明 (1)打开软件，把鼠标点击输入框，扫码即可 (2)不用考虑鼠标，直接监控扫码输入，若360卫士提示有键盘监控请通过 (3)在设置中，可修改扫码的数据和上传功能。修改数据后要保存才立即生效。 (4)扫码以回车13为结束，扫码的字符输入间隔可调整，一般60-80毫秒。
vue input 获取焦点并选中
xuexi0754的博客
06-20 1052
通过id获取焦点并选中
基于vue框架，vant组件库，移动端的搜索框实现自动聚焦，使用自定义指令
web00_11的博客
08-05 1980
通过全局自定义（directives）指令来实现搜索框的自动聚焦 import Vue from 'vue' // 插件对象(必须有install方法, 才可以注入到Vue.use中) export default { install () { Vue.directive('fofo', { inserted (el) { fn(el) }, update (el) { fn(el) } }) } } f
vue登录界面用户名，密码未输入，点击登录自动获取焦点
xiasohuai的博客
07-26 4726
1.首先要使得第一个文本框自动获取焦点。然后每一个后面加回车事件 。(iviewUI组件库为例)  &lt;Form ref="loginForm" :model="formItem" :label-width="80" :rules="rules"&gt; &lt;FormItem prop="userName" label="账号:"&gt;&am
实现条码枪的无焦点扫码
nullablewu的博客
08-20 8006
    在上一家公司创业初期，我接触的第一个项目是医院的供应室消毒包管理系统，几乎一人之力用了两个多月的时间，完成了基本的开发工作。回想起来，当时有个设计印象深刻。趁着还有记忆，记录下来，供大家一时之需。     当时开发的时候，对于物资的管理，自然离不开条码枪的角色。设计的是无线条码枪，让工作人员可以自由的在作业现场走动。但是有个用户体验问题，就是一般情况下，条码枪扫描的时候，都需要将输入...
Vue中的@blur/@focus事件
热门推荐
weixin_42246997的博客
12-28 4万+
@blur 是当元素失去焦点时所触发的事件 @focus是元素获取焦点时所触发的事件 <template> <div> <!-- @blur 当元素失去焦点时触发blur事件 --> <div> <input type="text" placeholder="请输入内容" @blur...
vue之input 指令 获取焦点
lotte
07-11 2万+
&lt;li v-for="(i,k) in roleList" :key="k" :class="{'active':isActive==k}"&gt;     &lt;el-input v-model="i.vRoleName" v-if='i.isEdit' v-on:blur="i.isEdit=false"         v-focus="{ cls: 'e
Vue中的@blur、@focus事件
weixin_52630329的博客
04-11 1850
@blur 是当元素失去焦点时所触发的事件 @focus是元素获取焦点时所触发的事件**
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值