JavaScript 键盘事件

来源：互联网发布：阿里云服务器新手编辑：程序博客网时间：2024/06/03 23:38

keyCode
获取用户按下键盘的哪个按键

<!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>无标题文档</title><script>document.onkeydown=function (ev){    var oEvent=ev||event;    alert(oEvent.keyCode);};</script></head><body></body></html>

例子：键盘控制Div移动

<!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><style>#div1 {width:100px; height:100px; background:#CCC; position:absolute;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>document.onkeydown=function (ev){    var oEvent=ev||event;    var oDiv=document.getElementById('div1');    //←     37    //右     39    if(oEvent.keyCode==37)    {        oDiv.style.left=oDiv.offsetLeft-10+'px';    }    else if(oEvent.keyCode==39)    {        oDiv.style.left=oDiv.offsetLeft+10+'px';    }};</script></head><body><div id="div1"></div></body></html>

其他属性
ctrlKey、shiftKey、altKey
例子：提交留言
回车提交
ctrl+回车提交

<!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>无标题文档</title><script>window.onload=function (){    var oBtn=document.getElementById('btn1');    var oTxt1=document.getElementById('txt1');    var oTxt2=document.getElementById('txt2');    oBtn.onclick=function ()    {        oTxt1.value+=oTxt2.value+'\n';        oTxt2.value='';    };    oTxt2.onkeydown=function (ev)    {        var oEvent=ev||event;        if(oEvent.ctrlKey && oEvent.keyCode==13)        {            oTxt1.value+=oTxt2.value+'\n';            oTxt2.value='';        }    };};</script></head><body><textarea id="txt1" rows="10" cols="40"></textarea><br /><input id="txt2" type="text" /><input id="btn1" type="button" value="留言" /></body></html>

参考：JavaScript

阅读全文

0 0