31利用onkeydown 使文本框不能输入数字 使用键盘控制盒子移动

31利用onkeydown 使文本框不能输入数字 使用键盘控制盒子移动

一、利用onkeydown使input不能输入数字

创建一个单行文本框和提示span

<input type = "text">
<span></span>

js实现效果

//获取input节点和span节点

var input = document.querySelector("input")
var span= document.querySelector("span")

//绑定input节点键盘上的键按下事件

input.onkeydown = function(e){
    
    //兼容IE和其他浏览器的事件对象
    
	e = e || window.event
    
	//使用console.log(e.keyCode)点击并获取左右两边的数字0-9的ASCLL码
    //当点击键盘上的键是左右两边的数字的任意一个键
    
	if(57 >= e.keyCode && e.keyCode >= 48 || 105 >= e.keyCode && e.keyCode >= 96){
        
        //提示输入不符合要求
        
        span.innerHTML = "不能输入数字"
        
        //阻止浏览器默认行为，即当输入数字是不会成功
        
		return false
	}
    
    else{
        
        //当点击其他键时清除提示
        
        span.inner = ""
    }
}

二、利用onkeydown使用键盘控制盒子移动

创建一个盒子

<div></div>

设置盒子样式

* {
	padding: 0;
	margin: 0;
}

div {
	width: 200px;
	height: 200px;
	background: pink;
	position: absolute;
}

js实现样式

//获取div节点

var div = document.querySelector("div")

//绑定节点键盘上的键按下事件

onkeydown = function (e) {
    
    //兼容IE和其他浏览器的事件对象
    
	e = e || window.event
    
    //设置步长
    
	var step = 10
    
    //当组合键ctrl + 其他的键时改变步长
    
	if (e.ctrlKey) {
		step = 100
	}
    
    //使用console.log(e.keyCode)点击并获取 ← ↑ → ↓ 和 A W D S 的ASCLL码
    //当点击键盘上的键满足需要的ASCLL码手时
    
	switch (e.keyCode) {
            
            //点击 ← 或 A 键时
            
		case 37:
		case 65:
            
            //盒子向左移动
            
			div.style.left = div.offsetLeft - step + "px"
			break
            
            //点击 ↑ 或 W 键时
            
		case 38:
		case 87:
            
            //盒子向上移动
            
			div.style.top = div.offsetTop - step + "px"
			break
            
            //点击 → 或 D 键时
            
		case 39:
		case 68:
            
            //盒子向右移动
            
			div.style.left = div.offsetLeft + step + "px"
			break
            
            //点击 ↓ 或 S 键时
            
		case 40:
		case 83:
            
            //盒子向下移动
            
			div.style.top = div.offsetTop + step + "px"
			break
	}
    
    //设置在最左边时不能再向左移动
    
	if(div.offsetTop < 0){
		div.style.top = 0
	}
    
    //设置在最上边时不能再向上移动
    
	if(div.offsetLeft < 0){
		div.style.left = 0
	}
}