一、设计思路:设计一个简单的输入对话框,然后按下enter进行输入事件。
二、聊天输入框的代码如下:
三、此时的页面展示如下:
四:设计函数,使得输入文字时,按下按钮可以提交到聊天框。
五、此时在页面上测试,输入一段文字:
六、执行结果如下:
七、设计函数,使得按下enter跟按钮同样的功能:
八、刷新页面,测试:
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==27){ // 按 Esc
//要做的事情
}
if(e && e.keyCode==113){ // 按 F2
//要做的事情
}
if(e && e.keyCode==13){ // enter 键
//要做的事情
}
};
Js键盘事件
keydown:按键按下
keyup:按键抬起
keypress:按键按下抬起
/*输出输入的字符*/
function myKeyDown(id) {
console.log(document.getElementById(id).value);
}
/*按键结束,字体转换为大写*/
function myKeyUp(id) {
var text = document.getElementById(id).value;
document.getElementById(id).value = text.toUpperCase();
}
常用的键盘事件对应的键码:
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
用js写一个回车键盘事件如下:
$('#search_input').bind('keyup', function(event) {
if (event.keyCode == "13") {
//回车执行查询
$('#search_button').click();
}
});
JS监听某个DIV区域
$("#queryTable").bind("keydown",function(e){
// 兼容FF和IE和Opera
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
//回车执行查询
$("#queryButton").click();
}
});
说明:只要定义了这些键的动作,在浏览器里按下这些键就会响应,兼容目前所有浏览器。
javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。
只要你定义了这些键的动作,你在浏览器里按下这些键就会响应,兼容目前所有浏览器。