onkeydown 按下键盘时运行脚本
onkeypress 按下并松开时运行脚本
onkeyup 松开按键时运行脚本
以下例子为onkeydown事件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tittle</title>
<script>
function myFunction(){
alert("你在输入栏内按下一个键");
}
</script>
</head>
<body>
<p>当你在输入框内按下一个按键是函数被触发</p>
<input type="text" onkeydown="myFunction()">
</body>
</html>
以下例子为用onkeypress事件
<html>
<body>
<script type="text/javascript">
//在文本框中无法输入数字
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<form>
Type some text (numbers not allowed):
<input type="text" onkeypress="return noNumbers(event)" />
</form>
</html>
以下例子为onkeyup事件:
<html>
<head>
<script type="text/javascript">
//小写字母转化为大写字母
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
name: <input type="text" id="fname" onkeyup="upperCase(this.id)">
</body>
</html>
以下为常用键盘值:
以下为一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html,body{
overflow:hidden;
}
body{
margin:0;
padding:0;
}
pre{
color:green;
padding:10px 15px;
background:#f0f0f0;
border:1px dotted #333;
font:12px/1.5 Courier New;
margin:12px;
width: 1000px;
height: 1000px;
}
span{
color:#999;
}
#box{
position:absolute;
top:50px;
left:300px;
width:100px;
height:100px;
background:red;
}
</style>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<pre>
红色方块为键盘操作区域,您可以进行如下操作:
上:↑ 下:↓ 左:← 右:→
Ctrl + 1 : 背景变为绿色
Ctrl + 2 : 背景变为黄色
Ctrl + 3 : 背景变为蓝色
Ctrl + ↑ : 放大
Ctrl + ↓ : 缩小
</pre>
<div id="box"></div>
<script>
var scale = 1;
$(document).keydown(function(event){
switch (event.which) {
//左
case 37:
$("#box").css("left","-=10px");break;
//上
case 38:
if(event.ctrlKey){
scale = scale + 0.1;
$('#box').css("transform","scale("+scale+")");
}
$("#box").css("top","-=10px");break;
// 右
case 39:
$("#box").css("left","+=10px");break;
// 下
case 40:
if(event.ctrlKey){
scale = scale - 0.1;
$('#box').css("transform","scale("+scale+")");
}
$("#box").css("top","+=10px");break;
case 49:
//ctrl键系列
if(event.ctrlKey) $('#box').css("background-color","green");
break;
case 50:
if(event.ctrlKey) $('#box').css("background-color","yellow");
break;
case 51:
if(event.ctrlKey) $('#box').css("background-color","blue");
break;
}
// 阻止浏览器默认事件
return false;
});
$(document).keyup(function () {
$(document).keydown = null;
return false;
});
</script>
</body>
</html>