共计 4680 个字符,预计需要花费 12 分钟才能阅读完成。
一、监听回车键调用事件
1、jquery:
$("dom").keypress(function (even) {if (even.which == 13) {// 事件处理} | |
}); |
2、JavaScript:
document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0]; | |
if(e && e.keyCode==27){ // 按 Esc | |
// 事件处理 | |
} | |
if(e && e.keyCode==13){ // enter 键 | |
// 事件处理 | |
} | |
} |
3、键码阐明:
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 | |
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 53 = 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 |
二、挪动端键盘事件处理及兼容性解决方案
1、操作系统判断
function navigator(){ | |
var u = navigator.userAgent; | |
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android 终端 | |
var isiOS = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/); //ios 终端 | |
if(isAndroid){// 安卓}; | |
if(isiOS){//ios}; | |
}; |
2、键盘的收起和开展
$(document).on("focusin",function(){// 键盘弹出~~~~}) | |
$(document).on("focusout",function(){// 键盘收起}) |
3、ios 键盘收起
function navigator(){ | |
var u = navigator.userAgent; | |
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android 终端 | |
var isiOS = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/); //ios 终端 | |
if(isAndroid){ }; | |
if(isiOS){$(document).on("focusin",function(){ | |
// 键盘弹起时,让滚动条滚动到底部,$(window).scrollTop($("body").height()); | |
// 设置定时器 | |
setTimeout(function(){ | |
// 获取文档高度 | |
var clientHeight= document.body.clientHeight; | |
// 获取滚动高度 -- 也就是键盘高度 | |
var scrollTop = document.body.scrollTop; | |
// 让你想要的底部元素的 bottom:键盘高度。$(".bottom").css("bottom",scrollTop+"px"); | |
// 最初再设置一个定时器让滚动条回到顶部。setTimeout(function(){$(window).scrollTop(0); | |
},300); | |
},300); | |
}); | |
$(document).on('focusout', function () { | |
// 软键盘收起的事件处理 | |
// 让底部元素回到底部。$(".bottom").css("bottom","0"); | |
}); | |
}; | |
}; |
4、android 键盘收起
function navigator(){ | |
var u = navigator.userAgent; | |
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android 终端 | |
var isiOS = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/); //ios 终端 | |
if(isAndroid){var wHeight = $(window).innerHeight(); // 获取初始可视 窗口高度 | |
$(window).resize(function() { // 监测窗口大小的变动事件 | |
var hh = $(window).innerHeight(); // 以后可视窗口高度 | |
var viewTop = $(window).scrollTop(); // 可视窗口高度顶部间隔网页顶部的间隔 | |
if(wHeight > hh){// 能够作为虚构键盘弹出事件}else{// 能够作为虚构键盘敞开事件}; | |
wHeight = hh; | |
}); | |
}; | |
if(isiOS){};}; |
正文完