js之键盘事件

最新推荐文章于 2024-04-23 09:34:00 发布

webelieveyou

最新推荐文章于 2024-04-23 09:34:00 发布

阅读量4.2k

点赞数 3

本文链接：https://blog.csdn.net/webeliveyou/article/details/92797897

版权

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>

webelieveyou

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js之键盘事件

onkeydown 按下键盘时运行脚本onkeypress 按下并松开时运行脚本onkeyup 松开按键时运行脚本以下例子为onkeydown事件：<!DOCTYPE html><html><head><meta charset="utf-8"><title>tittle</title...
复制链接

扫一扫