onkeydown:当键盘按键按下的时候触发
onkeyup:当键盘按键抬起的时候触发
event.keyCode:数字类型 键盘按键的值 键值
ctrlKey,shiftKey,altKey 布尔值
当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false
当鼠标按住ctrl键并点击页面,返回true,若只点击页面,则返回false.
留言本,回车输入效果
发现输入一个字幕就会添加一个li
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oText = document.getElementById('text1');
var oUl = document.getElementById('ul1');
oText.onkeyup = function(){
var ev = ev || event;
if(this.value != ''){
if(ev.keyCode == 13 ){
var oLi = document.createElement('li');
oLi.innerHTML = this.value;
if(oUl.children[0]){
oUl.insertBefore(oLi,oUl.children[0]);
}else{
oUl.appendChild(oLi);
}
}
}
}
}
</script>
</head>
<body>
<input type="text" id="text1"/>
<ul id="ul1"></ul>
</body>
</html>
-------------------------键盘控制divyi---------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
#div1{width: 100px ;height: 100px;background: blue;position: absolute; }
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能接收键盘事件
//onkeydown:如果按下不抬起,那么会连续触发
document.onkeydown = function(ev){
var ev = ev || event;
switch(ev.keyCode){
case 37:
oDiv.style.left = oDiv.offsetLeft -10 +'px';
break;
case 38:
oDiv.style.top = oDiv.offsetTop -10 +'px';
break;
case 39:
oDiv.style.left = oDiv.offsetLeft +10 +'px';
break;
case 40:
oDiv.style.top = oDiv.offsetTop +10 +'px';
break;
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
思考:如果打游戏的时候,用户连续按某一键,电脑会判断用户是否是要连续输入某一值,会有一小段时间间隔,游戏会因这一小段延迟,over掉,所以怎么解决呢?
注意:
例子:按下shift键实现全选