100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > jquery 监听input输入停止 实现文本框自动跳转

jquery 监听input输入停止 实现文本框自动跳转

时间:2023-09-30 17:18:49

相关推荐

jquery 监听input输入停止 实现文本框自动跳转

今天学到了一个新的东西,在此记录一下

我遇到了一个这样的需求:添加扫描一条数据,无鼠标键盘。工具:扫描枪,动作:扫描两个条码

扫描抢扫描时,扫描出来的数据是显示在当前焦点上,用input的文本框来保存条码的数据是一个比较好的办法。只需要在页面加载的时间把焦点转移到其中一个input,然后在扫描结束后从这个input跳转到另一个input。现在有两个条码,所以需要两个input,可以通过input失去焦点获得焦点来省去鼠标的操作。

当时我想挺简单的呀,就是监听input输入事件嘛!然后…我就悲剧了

input有好多好多的事件,符合目前需求的事件我想到了这几个:input,change,keyup ,

propertychange

input和change都是事件对象,当输入框的值发生改变时触发该事件。change 事件在内容改变且失去焦点时触发;input 事件在 value 改变时触发,每增加或删除一个字符就会触发,然而通过 js 改变 value 时,却不会触发。

change 事件需要在失去焦点时触发,我这里用不到鼠标而且不止一个input,可以排除change 事件。input 事件在通过js改变value时不会触发,这个也可以排除

keyup事件是当按钮被松开时,发生的事件,它发生在当前获得焦点的元素上。我为什么会想到这个呢,因为扫描有自带的回车事件。然后问题就来了

结果扫描枪自己一个字一个回车的提交页面,我太难了。考虑到还有些扫描抢可能没有回车,硬件方面我没法控,也排除keyup

最后一个propertychange 事件,它是实时触发,可以通过 js 改变也会触发该事件。好!就你了小伙子

代码:

$("#input1").bind('input propertychange', function () {var barCode1= $(this).val();$("#input2").focus();})$("#input2").bind('input propertychange', function () {var barCode2= $(this).val();$.ajax(...);//此处代码省略})

问题又出现了!!

我差点忘了它跟input事件差不多,每增加或删除一个字符就会触发

后来我苦思冥想,阅历各个帖子,各种姿势问百度。终于让我找到了解决办法!!

不说了,先放代码

$("#input1").bind('input propertychange', function () {var barCode1= $(this).val();setTimeout(function(){$("#input2").focus();}, 200)})$("#input2").bind('input propertychange', function () {var barCode2= $(this).val();setTimeout(function(){$.ajax(...);//此处代码省略}, 200)})

就是setTimeout(),setTimeout()是定时器指定多少时间后执行一次,只执行一次。用setTimeout()监听input是否停止输入,可能是因为扫描抢输入的速度太快了,我这里设置的200毫秒刚好够

问题就这样解决了,事情总是看起来简单,做起来废头发

注意:一般情况下用keyup事件就可以解决了,我是根据我这边扫描枪的情况用的。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。