您的位置：首页 > Web前端 > JavaScript

转载：JS获取回车事件（兼容各浏览器） 另easyul框架的方式

2016-01-06 11:54 656 查看



原文地址：http://www.cnblogs.com/zhanglee/archive/2011/12/29/2731572.html


JS获取回车事件（兼容各浏览器）

JS获取回车事件一。用到onkeydown获取事件动作，二。用到键盘对应代码keyCode,三。 var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异，下面以贴一下实例：

XML/HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS获取回车时间（兼容各浏览器）</title>

</head>

<body>

<input onkeydown="enterSumbit()" type="text" id="qqnum" class="text"/>

<input onclick="queryAward()" type="button" class="btnS" value="提交"/>

<script>

function enterSumbit(){

var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异

if (event.keyCode == 13){

queryAward();

}

}

function queryAward(){

alert('test');

}

</script>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS获取回车时间（兼容各浏览器）</title>

</head>

<body>

<input onkeydown="enterSumbit()" type="text" id="qqnum" class="text"/>

<input onclick="queryAward()" type="button" class="btnS" value="提交"/>

<script>

function enterSumbit(){

var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异

if (event.keyCode == 13){

queryAward();

}

}

function queryAward(){

alert('test');

}

</script>

</body>

</html>

另，如果使用了前端框架easyul，并在input框中设置了
class="easyui-textbox" 那么以上的回车事件会失效，引用他人的说法就是

由于easyul在生成input时就覆盖了原先的input，那这时依旧使用原来的方式绑定时会找不到属性进行绑定。

需要在使用时需要更改原先绑定方式，根据easyul规则来进行绑定，另外 未使用easyul时，是.keyCoke,这里是.which。

</pre><pre name="code" class="html">
$('#qq_num').textbox('textbox').keydown(function(e) {
if (e.which == 13) {
doSearch();
}
});

//假设这里为查询 ajax
function doSearch(){
alert("xxx");
//ajax操作，查询类,,,
/* $.post("xxxxx_url",$("#fr").serialize(),function(data){
alert(data);
},"json"); */
}

<div>
<form id="fr">
<table>
<tr>
<td>QQ号:</td>
<td><input onkeydown="enterSumbit()" id="qq_num" class="easyui-textbox"
style="width: 100px" textField="text">   </td>
<td>
<a href="#" class="easyui-linkbutton"
iconCls="icon-search" onclick="doSearch()">查询</a>
</td>
</tr>
</table>
</form>
</div>


顺便再摘录一下有关keycode相关事件响应列表

XML/HTML代码

keycode 8 = BackSpace BackSpace

keycode 9 = Tab Tab

keycode 12 = Clear

keycode 13 = Enter

keycode 16 = Shift_L

keycode 17 = Control_L

keycode 18 = Alt_L

keycode 19 = Pause

keycode 20 = Caps_Lock

keycode 27 = Escape Escape

keycode 32 = space space

keycode 33 = Prior

keycode 34 = Next

keycode 35 = End

keycode 36 = Home

keycode 37 = Left

keycode 38 = Up

keycode 39 = Right

keycode 40 = Down

keycode 41 = Select

keycode 42 = Print

keycode 43 = Execute

keycode 45 = Insert

keycode 46 = Delete

keycode 47 = Help

keycode 48 = 0 equal braceright

keycode 49 = 1 exclam onesuperior

keycode 50 = 2 quotedbl twosuperior

keycode 51 = 3 section threesuperior

keycode 52 = 4 dollar

keycode 553 = 5 percent

keycode 54 = 6 ampersand

keycode 55 = 7 slash braceleft

keycode 56 = 8 parenleft bracketleft

keycode 57 = 9 parenright bracketright

keycode 65 = a A

keycode 66 = b B

keycode 67 = c C

keycode 68 = d D

keycode 69 = e E EuroSign

keycode 70 = f F

keycode 71 = g G

keycode 72 = h H

keycode 73 = i I

keycode 74 = j J

keycode 75 = k K

keycode 76 = l L

keycode 77 = m M mu

keycode 78 = n N

keycode 79 = o O

keycode 80 = p P

keycode 81 = q Q at

keycode 82 = r R

keycode 83 = s S

keycode 84 = t T

keycode 85 = u U

keycode 86 = v V

keycode 87 = w W

keycode 88 = x X

keycode 89 = y Y

keycode 90 = z Z

keycode 96 = KP_0 KP_0

keycode 97 = KP_1 KP_1

keycode 98 = KP_2 KP_2

keycode 99 = KP_3 KP_3

keycode 100 = KP_4 KP_4

keycode 101 = KP_5 KP_5

keycode 102 = KP_6 KP_6

keycode 103 = KP_7 KP_7

keycode 104 = KP_8 KP_8

keycode 105 = KP_9 KP_9

keycode 106 = KP_Multiply KP_Multiply

keycode 107 = KP_Add KP_Add

keycode 108 = KP_Separator KP_Separator

keycode 109 = KP_Subtract KP_Subtract

keycode 110 = KP_Decimal KP_Decimal

keycode 111 = KP_Divide KP_Divide

keycode 112 = F1

keycode 113 = F2

keycode 114 = F3

keycode 115 = F4

keycode 116 = F5

keycode 117 = F6

keycode 118 = F7

keycode 119 = F8

keycode 120 = F9

keycode 121 = F10

keycode 122 = F11

keycode 123 = F12

keycode 124 = F13

keycode 125 = F14

keycode 126 = F15

keycode 127 = F16

keycode 128 = F17

keycode 129 = F18

keycode 130 = F19

keycode 131 = F20

keycode 132 = F21

keycode 133 = F22

keycode 134 = F23

keycode 135 = F24

keycode 136 = Num_Lock

keycode 137 = Scroll_Lock

keycode 187 = acute grave

keycode 188 = comma semicolon

keycode 189 = minus underscore

keycode 190 = period colon

keycode 192 = numbersign apostrophe

keycode 210 = plusminus hyphen macron

keycode 211 =

keycode 212 = copyright registered

keycode 213 = guillemotleft guillemotright

keycode 214 = masculine ordfeminine

keycode 215 = ae AE

keycode 216 = cent yen

keycode 217 = questiondown exclamdown

keycode 218 = onequarter onehalf threequarters

keycode 220 = less greater bar

keycode 221 = plus asterisk asciitilde

keycode 227 = multiply division

keycode 228 = acircumflex Acircumflex

keycode 229 = ecircumflex Ecircumflex

keycode 230 = icircumflex Icircumflex

keycode 231 = ocircumflex Ocircumflex

keycode 232 = ucircumflex Ucircumflex

keycode 233 = ntilde Ntilde

keycode 234 = yacute Yacute

keycode 235 = oslash Ooblique

keycode 236 = aring Aring

keycode 237 = ccedilla Ccedilla

keycode 238 = thorn THORN

keycode 239 = eth ETH

keycode 240 = diaeresis cedilla currency

keycode 241 = agrave Agrave atilde Atilde

keycode 242 = egrave Egrave

keycode 243 = igrave Igrave

keycode 244 = ograve Ograve otilde Otilde

keycode 245 = ugrave Ugrave

keycode 246 = adiaeresis Adiaeresis

keycode 247 = ediaeresis Ediaeresis

keycode 248 = idiaeresis Idiaeresis

keycode 249 = odiaeresis Odiaeresis

keycode 250 = udiaeresis Udiaeresis

keycode 251 = ssharp question backslash

keycode 252 = asciicircum degree

keycode 253 = 3 sterling

keycode 254 = Mode_switch
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航