键盘事件
2017-01-03 本文已影响0人
奶瓶SAMA
// onkeydown键盘按下的时候触发
// onkeyup键盘抬起的时候触发
// ev.keyCode:数字类型，键盘按键的值 键值
// ctrlKey altKey shiftKey 布尔类型
// 当一件事情发生的时候，如果是ctrl || alt || shift是按下的状态，返回true，否则返回false
//document.onkeydown= function (ev) {
// var ev=ev||event;
// alert(ev.keyCode);
//};
document.onclick=function(ev){
var ev=ev||event;
alert(ev.shiftKey);
}
发送留言
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload= function () {
var otext=document.getElementById('text1');
var ul1=document.getElementById('ul1');
otext.onkeyup= function (ev) {
var ev=ev||event;
if(this.value!=''){
if(ev.keyCode==13 && ev.ctrlKey){
var oli=document.createElement('li');
oli.innerHTML=otext.value;
if(ul1.children[0]){
ul1.insertBefore(oli,ul1.children[0]);
}else{
ul1.appendChild(oli);
}
}
}
};
};
</script>
</head>
<body>
<input type="text" id="text1"/>
<ul id="ul1" id="'ul1"></ul>
</body>
</html>
键盘控制div移动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload= function () {
var odiv=document.getElementById('div1');
document.onkeydown= function (ev) {
var ev=ev||event;
switch (ev.keyCode){
case 37:
odiv.style.left=parseInt(getByClass(odiv,'left'))-10+'px';
break;
case 38:
odiv.style.top=parseInt(getByClass(odiv,'top'))-10+'px';
break;
case 39:
odiv.style.left=parseInt(getByClass(odiv,'left'))+10+'px';
break;
case 40:
odiv.style.top=parseInt(getByClass(odiv,'top'))+10+'px';
break;
}
};
function getByClass(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
