Jquery实现input keydown回车触发事件（任意触发、指定触发）

来源：互联网发布：如何禁用端口编辑：程序博客网时间：2024/05/22 01:58

一、说明

回车触发事件，本文只提一下两种：

1、任意触发：不管当前焦点在哪个input输入框，只要回车就触发事件，如登录界面。

2、指定触发：指定某个input输入框回车时才触发事件。

二、实现代码

1、多次触发

html代码部分

<body onkeydown="keyDelivery();">输入框1：<input id="inputId1" name="inputName1" class="className1"/><br>输入框2：<input id="inputId2" name="inputName2" class="className2"/><br><!--  引入Jquery --><script src="${dynamicDomain }/static/js/jquery-1.11.1.min.js"></script></body>

js代码部分

<script type="text/javascript">function keyDelivery(){//对应body上写onkeydown="keyDelivery();"//第1种，任意触发$(document).keydown(function(event) {var event = arguments.callee.caller.arguments[0] || window.event;// 消除浏览器差异if (event.keyCode == 13) {  alert('登录事件');//登录事件}});//第2种，指定触发$('#inputId1').keydown(function(event) {if (event.keyCode == 13) {alert('你输入的值是' + $('#inputId1').val());}});}</script>

2、单次触发
平时大家使用keydown大家都是多次触发的多，但是细心的人通过调试会发现，使用指定触发回车一次，却多次触发js function事件，这个是因为keydown处理回车问题，会累积之前的次数。（刷新浏览器重新计算）

什么累积？
简单的说就是if (event.keyCode == 13) {//代码块}中的代码块会执行1次、2次、3次、4次、5次，可以做个测试

============================测试==========================

html代码不变

js代码

<script type="text/javascript">var num = 1;function keyDelivery(){$('#inputId1').keydown(function(event) {var event = arguments.callee.caller.arguments[0] || window.event;// 消除浏览器差异if (event.keyCode == 13) {console.log('结果=' + num);  num++;}});}</script>

浏览器控制台打印结果

第一次回车，触发一次事件
结果=1

第二次回车，触发两次事件
结果=2
结果=3

第三次回车，触发三次事件
结果=4
结果=5
结果=6
......
一直累积，很烦人

总结：keydown处理回车问题，浏览器会累积之前的次数。

四、Jquery实现input keydown指定触发（正确写法）

将想要触发的事件放入到$(this).get(0).onkeyup = function(){ //事件 }，如代码所示：

<script type="text/javascript">var num = 1;function keyDelivery(){$('#inputId1').keydown(function(event) {var event = arguments.callee.caller.arguments[0] || window.event;// 消除浏览器差异if (event.keyCode == 13) {$(this).get(0).onkeyup = function(){ console.log('结果=' + num);num++;}}});}</script>

===================再次测试===============

浏览器控制台打印结果

回车第一次，触发一次事件
结果=1
回车第二次，触发一次事件
结果=2
....
回车第n次，触发一次事件
结果=n

OK，这样不管我们在input输入框怎么回车，都只会触发事件一次。

附（可忽略）：对于keydown回车浏览器会累积次数问题，不明白的可参考CSDN论坛精帖，我也是看了改帖子才理解的：http://bbs.csdn.net/topics/350228744

阅读全文

0 0