今天学到了一个新的东西,在此记录一下
我遇到了一个这样的需求:添加扫描一条数据,无鼠标键盘。工具:扫描枪,动作:扫描两个条码
扫描抢扫描时,扫描出来的数据是显示在当前焦点上,用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事件就可以解决了,我是根据我这边扫描枪的情况用的。