js中的键盘事件和一些应用

最新推荐文章于 2023-09-06 18:16:15 发布

家里有蜘蛛

最新推荐文章于 2023-09-06 18:16:15 发布

阅读量977

点赞数 2

分类专栏： # 原生js

本文链接：https://blog.csdn.net/qq_44983621/article/details/90612557

版权

原生js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

js中的键盘事件和一些简单应用

onkeydown, onkeyup

键盘事件一般都是对可获得焦点的对象例如input
下面是一些应用

一、

	在文本框中只能输入非数字的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				document.onkeydown = function(event){
					event = event || window.event;
					// console.log(event.keyCode);
					if(event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode >= 96 && event.keyCode <= 105) //设置只能输入非数字   用编码判断
					return false;
				}
			}
		</script>
	</head>
	<body>
		<input type="text" name="" id="" value="" />
	</body>
</html>

二、

	使用上下左右移动盒子并按着ctrl加速

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute; /* 定位很重要 */
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				event = event || window.event;
				document.onkeydown = function(event){
					var speed = 10;
					if(event.ctrlKey){
						speed = 50; //改变移动速度
					}
					// 37左
					// 38下
					// 39右
					// 40下
					switch(event.keyCode){
						case 37: box.style.left = box.offsetLeft - speed + "px"; break;
						case 38: box.style.top = box.offsetTop - speed + "px"; break;
						case 39: box.style.left = box.offsetLeft + speed + "px"; break;
						case 40: box.style.top = box.offsetTop + speed + "px"; break;
						
					}
				}
			}
			
		</script>
		
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

此方法有一点问题盒子移动的第一次和的二次之间会有明显的小卡顿这个问题需要用到其他知识解决这里暂不解决可以参考后续发布

家里有蜘蛛

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js中的键盘事件和一些应用

js中的键盘事件和一些简单应用onkeydown, onkeyup键盘事件一般都是对可获得焦点的对象例如input下面是一些应用一、在文本框中只能输入非数字的元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&g...
复制链接

扫一扫