vue中移动端点击手机键盘实现文本框搜索

最新推荐文章于 2024-07-25 14:45:39 发布
最新推荐文章于 2024-07-25 14:45:39 发布
阅读量1.1k 收藏 5
点赞数 3
分类专栏： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hong521520/article/details/106498140
版权
在Vue移动端开发中，通过在输入框组件上监听keyup.13.native事件并绑定onEnterSearch方法，可以实现在用户按下键盘回车时执行搜索功能。此方法在实际项目中已验证有效。
摘要由CSDN通过智能技术生成

给组件的搜索加上这一行代码@keyup.13.native=“onEnterSearch”
这是我做的一个移动端项目，亲测有效，记录下来

 <el-input
        @keyup.13.native="onEnterSearch"
        size="medium"
        class="inputs"
最低0.47元/天 解锁文章
一个橙子呀
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue自定义指令-移动端点击元素input输入框垂直居中于软键盘弹出后的页面
liuhao9999的博客
04-01 4260
Vue.directive('gomiddle', { // 当被绑定的元素插入到 DOM 中时…… inserted: function(el) { el.addEventListener('click', function() { setTimeout(function() { let top = el.offsetTop; let windowScrollTop = documen.
Vue3实现酷炫打字机效果：让你的网站文字动起来
陈书予
05-17 9851
酷炫打字机效果是指让网站上的文字像打字一样逐个显示出来的效果。这种效果可以使网页内容更加生动有趣，也可以提高读者的阅读兴趣。更快的渲染速度更小的代码体积更灵活的组件系统更好的TypeScript支持改进的响应式数据绑定机制在本文中，我们将使用Vue3框架实现酷炫打字机效果。除了优化Typewriter组件，我们还可以添加一些额外的功能来增强用户体验。例如，我们可以添加打字音效，使得打字机效果更加逼真。为此，我们可以使用HTML5的Audio API。
vue2.0实现移动端的输入框实时检索更新列表功能
08-27
最近小编在做vue2.0的项目，遇到移动端实时检索搜索更新列表的效果，下面脚本之家小编给大家带来了vue2.0 移动端的输入框实时检索更新列表功能的实例代码，感兴趣的朋友参考下吧
vue移动端自适应搜索框组件(带历史搜索功能)
weixin_45055355的博客
01-04 600
vue移动端自适应搜索框(带历史搜索功能)
vue2 点击按钮弹框
最新发布
weixin_65201086的博客
07-25 625
el-dialog title="个人信息修改" class="diglog" :close-on-click-modal="false" :visible.sync="open" width="30%"<el-input v-model="input" placeholder="请输入姓名" class="input"></el-input><el-form-item class="span" label="输入姓名" prop="name"><el-button>取消</el-button>
vue 移动端 利用vue 自定义指令实现搜索页面的输入框的自动聚焦 Vue.use
weixin_59519449的博客
04-13 1226
目标效果：利用vue 自定义指令实现搜索页面的输入框的自动聚焦 使用自定义指令的原因： vue默认内置了v-model、v-if、v-show、v-html、v-text等指令，但是这些往往不足以满足我们实际项目开发中的场景，比如权限控制按钮、路由菜单，复制文字等功能，就需要我们自己自定义一些满足我们项目需求的指令了，那怎么封装自定义指令，并使用呢？我们先从封装指令的基础说起。 钩子函数 bind：只调用一次，指令第一次绑定到元素时调用。可以进行一次性初始化设置。 inserted：被..
vue 匹配键盘输入_vue 移动端键盘搜索事件监听(转)
weixin_33737110的博客
01-13 776
前言：KeyPress 和KeyDown 、KeyPress之间的区别虽然从字面理解, KeyDown是按下一个键的意思, 但实际上二者的根本区别是, 系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符. 所以根据你的目的, 如果只想读取...
Vue——@功能PC端实现总结
小王的技术库
06-18 2494
近期需要接到一个需求，需要在输入框中实现@通知用户的功能，这个功能现在也有很多应用都有，像我们常用的QQ空间，微博这些，开始看到这个需求，心里一阵惊恐，没做过啊~~我们大体的思路就是：当监听到用户输入@的时候我们弹出人员选择器，这时候我们需要记住现在光标所在的位置，当用户选择人员完毕之后，我们创建一个span标签在插入到我们刚刚记录光标的位置，并且把我们输入的@删除，将光标放在这个节点的最后。按住shift + @ 的时候，弹出人员选择器人员选择器要跟随光标的位置出现选择时 @的用户标签插入当前的光标位置中
JS实现移动端实时监听输入框变化的实例代码
12-02
在JavaScript编程中，特别是在移动端应用开发中，监听输入框（input）的变化是非常常见的需求，例如在搜索框中实现模糊搜索或者在注册表单中验证手机号码。然而，传统的PC端事件，如focus、blur、hover、onkeyup等，...
js 兼 vue版本 键盘弹出后fixed布局上移问题
p_pppxxxxmmm的博客
11-18 918
js 版本： function keyboardHandle() { // 处理键盘弹出后fixed布局上移问题 const innerHeight = window.innerHeight; if (isAndroid()) { this.resizeFn = () => { const newInnerHeight = window.innerHeight; if (innerHeight > newI
基于Vue.js实现简单搜索框
10-21
主要为大家详细介绍了基于Vue.js实现简单搜索框,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 实现移动端键盘搜索事件监听
12-13
1、首先注意，input的type=”serch” <input @keypress="searchGoods" type="serch" placeholder="搜索商品"> 2、监听keypress事件 （1）KeyDown、KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。（要解释 ANSI 字符，应使用 KeyPress 事件。） （2）KeyPress 事件 此事件当用户按下和松开一个 ANSI 键时发生。 3、阻止事件默认行为 methods中添加 searchGoods方法， 判断keyCode ==13
基于vue实现可搜索下拉框定制组件
08-27
主要为大家详细介绍了基于vue实现可搜索下拉框定制组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5手机端抽屉式搜索框代码
02-22
端抽屉式搜索框代码
vue2.0 — 移动端的输入框实时检索更新列表 （二）
weixin_34419321的博客
05-09 450
人生于世，飘忽若浮萍 　　 — 暖暖 vue2.0 — 移动端的输入框实时检索更新列表 （一）:http://www.cnblogs.com/sunshinedream/p/9003811.html vue2.0 — 移动端的输入框实时检索更新列表 （一）用了一种传参数的形式实现的，但是觉得不太好，毕竟vue的核心技术点...
vue监听移动端软件键盘搜索（enter）事件
Lval的博客
09-26 4993
vue监听移动端软键盘搜索事件 vue中监听手机键盘的【完成】或【搜索】按钮触发事件，需要两个条件 1.form表单，输入框 2.@keyup.13 事件 或者 直接@keyup 然后事件的处理函数里判断 event.keyCode === 13 <input type="text" @keyup.13 = "handleKeyUp" placeholder="请输入用户手机号" v-mod...
vue输入框组件_单击以显示输入文本框Vue组件
cuk5340的博客
07-22 5529
vue输入框组件 标签编辑 (label-edit) Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值