绑定text的keyup事件显示提示，防止暴力点击同时有在合适时间显示

最新推荐文章于 2023-02-06 14:59:13 发布
最新推荐文章于 2023-02-06 14:59:13 发布
阅读量519 收藏
点赞数
分类专栏： react native与跨平台flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_31333625/article/details/53814135
版权

有一天做了个类似的东西，就像百度首页输入自动提示一样的东西，我在text上绑定keyup事件，每次键盘弹起的时候自动提示，但是又不想提示那么频繁，于是我用了上面方法，但是悲剧了，只有停止输入等500毫秒才会提示，在输入过程中根本就没有提示。看了一下代码，可不是嘛，只要是用户会盲打，在500毫秒内按一下键盘，提示函数就会不断被延迟，这样只有停下来的时候才会提示，这就没意义了。

能不能在函数节流的基础上间隔固定时间就执行一次？

小改动

在网上搜了一下我们可以根据第二种写法（第一种为函数拓展多个变量感觉有些不好）做些改动，添加一个参数作为到固定间隔必须执行

?
1
2
了解本专栏 订阅专栏 解锁全文 超级会员免费看
天崩地裂金刚不坏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue中移动端点击手机键盘实现文本框搜索
小柠檬爱编程
06-02 1094
给组件的搜索加上这一行代码@keyup.13.native=“onEnterSearch” 这是我做的一个移动端项目，亲测有效，记录下来 <el-input @keyup.13.native="onEnterSearch" size="medium" class="inputs" prefix-icon="el-icon-search" placeholder="金额、关键字搜索" v-model=".
【jQuery之keyup】16行代码实现输入提示
Sagitarioo的博客
06-19 451
效果代码$("#name").keyup(function(){ var text = $('#name').val(); /*以下部分实际使用换成Ajax*/ if(text=='张'){ $('#showT').show(); $('#showT').html("&lt;ul&gt;&lt;li onclick=\"sure('张三')\"&gt;张三&lt;/li&gt;&lt...
关于keyup,keydown,onclick
qq_41672008的博客
09-06 994
keyup keydown onclick 关于这三个我感觉大家应该会很清楚，今天面试的时候，面试官问了我这个问题，就是这三个的执行时机是怎样的，有什么关联？ 这个问题我平常很少去注意，于是当时的脑海里就一个疑问：就是按键可不可以触发onclick事件，我不太确定这个？ 之所以这么问就是 keyup是按键弹起的时候会触发的事件，keydown是按键按下的时候会触发的事件，这两个是只有按键才可以触...
学习一下 常说的防抖
lazy_tomato的博客
08-06 673
防抖(debounce),防止抖动, 短时间内触发多次，最终只触发一次;例如我有一个输入框，我希望在我键盘停止输入的 500 毫秒之后，可以自动搜索。 可以看到在我上面的截图中，我本意是想搜索,但是我的 say 方法，在操作键盘的时候被执行了很多次。（但是我本意只是想，在我停止操作后，执行一次 输出你好）这种时候就可以利用防抖这个概念了。再重温一下，防抖：短时间内触发多次，最终只触发一次; （当我操作键盘，如果 500 毫秒之内多次触发键盘，及重新计时） 如果想首次已进入就执行，间隔一段时间后才可以执行？.
手写防抖debounce
yolo
02-06 133
防抖debounce例子 多使用内存、缓存或其他方法 减少cpu计算量，减少网络加载耗时（空间换时间） 从何入手 让加载更快 减少资源体积，压缩代码，压缩图片 减少访问次数：合并代码，ssr服务器端渲染，缓存，合并图片雪碧图 使用更快的网络：CDN 让渲染更快（没有等待，没有无用功，没有重复渲染） css放在head，js放在body最下面 尽早开始执行JS，用DOMContentLoaded触发 懒加载（图片懒加载） 对dom查询进行缓存 频繁dom的操
vue实现给div绑定keyup的enter事件
10-15
在Vue.js中，有时我们需要为DOM元素，如`div`，绑定键盘事件，特别是像`keyup`这样的事件，以便在用户按下特定键时执行某些操作。在这个案例中，重点是实现`keyup.enter`事件，即当用户按下回车键时触发的事件。然而...
vue element-ui 绑定@keyup事件无效的解决方法
08-27
在Vue.js和Element-UI框架的开发过程中，有时会遇到绑定`@keyup`事件失效的情况。这通常是由于Element-UI组件内部已经处理了键盘事件，导致外部定义的事件监听器无法正常工作。针对这个问题，我们可以采取一些策略来...
JQuery 绑定事件时传递参数的实现方法
12-12
在jQuery中，`bind()`方法是用来绑定事件处理函数到元素上的。当事件发生时，绑定的函数会被调用。在某些情况下，我们可能需要在事件处理函数中传递额外的参数，以便更好地处理事件。以下是一些在jQuery中实现这一...
vue回车触发事件
qq_45149537的博客
06-21 8763
1.vue登录界面输入用户名回车自动聚焦密码框 用户框里放：@keyup.enter.native=“keyupClick”; 密码框里放:：ref=“mima” 在methods里： keyupClick() { this.$refs.mima.focus() }, 直接上代码 <van-field v-model="username" clearable type="tel" label="用户名" right-icon="questio
输入框事件监听(一)：keydown、keyup、input
热门推荐
甘焕的博客
08-30 9万+
当输入框的值发生变化时，我们可以通过keydown、keyup、input、onchange、blur事件观察到其值的变化，但它们的应用时机与应用场景存在显著的差异
ui:inputText keyup事件获得Value
qq_38370731的博客
08-22 713
<ui:inputText class="slds-input" value="{!v.filters}" keyup="{!c.doEnterDown}" updateOn="keyup"/> 将updateOn="eventName"，在触发event(此处为keyup)时即可实时获得Value值。 注意：默认change事件获得value值（失去焦点触发change事件，即...
事件文本框键盘事件keydown,keypress,keyup区别
love android
05-12 7944
文章结束给大家来个程序员笑话：[M]     按下键盘时会触发键盘事件，次序为keydown -> keypress ->keyup。     1、keydown、keypress事件触发在文字还没敲进文本框，这时如果在keydown、keypress事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时全部键盘事件的操作已完成，获得的是触发键盘事件后的文本
如何防抖动
一个在离前端越来越远的前端人员
12-29 4401
在开发中我们会接触到很多事件，有些事件会频繁的触发。如下： window 的 resize、scroll mousedown、mousemove keyup、keydown …… 以Vue为例，了解事件如何频繁的触发： &amp;amp;amp;amp;lt;template&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div ref=&amp;amp;amp;quot;container&amp;amp;am
JS事件中防抖debounce和节流throttle以及requestAnimationFrame
crli的博客
04-01 1349
浏览器的一些事件，如：resize,scroll,keydown,keyup,keypress,mousemove等。这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的被调用。这样浏览器的目的是为了保证信息的一致性，而对于我们来说就是一种资源的浪费了。 debounce的作用是在让在用户动作停止后延迟x ms再执行回调。 throttle的作用是在用户动作时没隔一定时间（如200ms...
JavaScript 前端性能优化之事件防抖
weixin_34268169的博客
04-12 195
定义： 指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时，以新的事件的时间为准，n 秒后才执行 应用场景： 输入款搜索时，用户在不断输入值时，用防抖来节约请求资源。 按钮点击：比如点赞，收藏 防抖有两种实现方式： 非立即执行：大概步骤函数调用->延迟->执行回调函数，如果在延迟的时候又触发了函数，则重新进行延迟操作，延迟结束后执...
vue element-ui 绑定@keyup事件无效
heqian650的博客
08-04 3万+
解决办法： <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可
javascript keyup时间延迟触发
Never lose the opportunity to succeed.
02-16 3493
定义和用法 完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。 注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。 一般情况是每点击一个按键都会触发一次keyup事件，但是有些
零基础学习Vue: 第9课 Vue的各种keyup键盘点击事件：
舜岳的博客
04-14 1991
零基础学习Vue: 第9课 Vue的各种keyup键盘点击事件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.n...
vue @keyup绑定多个事件
最新发布
09-06
在Vue中，我们可以使用`@keyup`指令来绑定多个事件。使用`@keyup`指令可以监听键盘按键的事件，并执行相应的方法。 例如，我们想要同时监听用户按下回车键和删除键的事件，可以将它们分别绑定到两个方法上。 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天崩地裂金刚不坏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值