第二十六章键盘事件与表单事件
1.键盘事件
-
关键事件
keydown按下，响应任何键的按下keypress按下，响应能输入字符的键和enter键的按下keyup抬起，响应任何键的抬起 -
e.keyCode e.which
e.keyCode得到按键的键值e.which得到按键的键值，或者是鼠标按下的键值
2.表单事件
-
onfocus onblur
表单元素获得（失去）焦点的时候触发，非表单元素只要能获得焦点，也能触发这个事件，比如a document等。
-
onchange
当内容发生改变的时候触发，一般用在 input select 标签上。
-
onsubmit
当点击了submit 按钮后，form标签会触发这个事件。
-
onreset
当点击了reset 按钮后，form标签会触发这个事件。
-
onselect
当表单里面的文字被选中后触发，不仅表单，别的标签也能触发这个事件。
可以使用 .focus() .blur() .submit() .reset() 方法通过js来完成各种操作。
- 可拖拽的盒子
<style>
*{margin:0;padding:0;font-family:"Microsoft Yahei";}
body{
user-select: none;
}
#box{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
(function(){
/*
* 1. mousedown mousemove mouseup的配合
*
* 2. 鼠标位置的变化量 等于 盒子位置的变化量
* */
let oBox = document.getElementById("box");
//按下之后才需要触发move事件
let ifDown = false;
//求出边界值
let maxLeft = document.documentElement.clientWidth - 100,
maxTop = document.documentElement.clientHeight - 100,
minLeft = 0,
minTop = 0;
window.onresize = function(){
maxLeft = document.documentElement.clientWidth - 100;
maxTop = document.documentElement.clientHeight - 100;
};
//变量定义在外面，以便于在兄弟作用域之间访问
let downX,downY,boxLeft,boxTop;
oBox.onmousedown = function(e){
ifDown = true;
//鼠标按下时 鼠标位置
downX = e.clientX;
downY = e.clientY;
//鼠标按下时 盒子的位置
boxLeft = this.offsetLeft;
boxTop = this.offsetTop;
};
document.onmousemove = function(e){
if (!ifDown)return;
//当前这一次move事件 鼠标位置
let moveX = e.clientX,
moveY = e.clientY;
//鼠标位置相当于初始位置的变化量
let x_ = moveX - downX,
y_ = moveY - downY;
//求得 盒子当前应该处于的位置
let left = boxLeft + x_,
top = boxTop + y_;
//控制left与top的边界
left = Math.min(left,maxLeft);//if(left>=maxLeft)left=maxLeft;
left = Math.max(left,minLeft);
top = Math.min(top,maxTop);
top = Math.max(top,minTop);
//改变样式
oBox.style.top = top + 'px';
oBox.style.left = left + 'px';
};
document.onmouseup = function(){
ifDown = false;
};
/*oBox.onmousedown = function(){
console.log("mousedown");
this.onmousemove = function(){
console.log("mousemove");
};
};
oBox.onmouseup = function(){
console.log("up");
this.onmousemove = null;
};*/
/*document.onmousedown = function(){
console.log("mousedown");
};
document.onmouseup = function(){
console.log("mouseup");
};*/
/*document.onmousemove = function(){
console.log("mousemove");
};*/
})();
</script>
- 表单事件
<div>
<form action="" method="get">
<input type="text" id="inp1">
<input type="radio" name="sex" value="" id="inp2">
<input type="radio" name="sex" value="" id="inp3">
<input type="checkbox" value="" id="inp4">
<select name="" id="select5">
<option value="0">星期天</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
<option value="6">星期六</option>
</select>
</form>
</div>
<script>
/*inp1.onfocus = function(){
console.log("focus 得到焦点");
};
inp1.onblur = function(){
console.log("blur 失去焦点");
};*/
/*失去焦点和获得焦点时 value不一样，才会触发change*/
inp1.onchange = function(){
console.log("change");
};
/*点选自己的时候，把自己变成选中状态的话，触发change*/
inp2.onchange = function(){
console.log("change2");
};
inp3.onchange = function(){
console.log("change3");
};
/*点选，改变选中状态触发change*/
inp4.onchange = function(){
console.log("change4");
};
/*选择其他选项的时候触发change*/
select5.onchange = function(){
console.log("change5");
console.log(this.value);
};
</script>
- form的事件
<div>
<form id="form" action="" method="get">
<input type="text" id="inp1">
<input type="radio" name="sex" value="" id="inp2">
<input type="radio" name="sex" value="" id="inp3">
<input type="checkbox" value="" id="inp4">
<select name="" id="select5">
<option value="0">星期天</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
<option value="6">星期六</option>
</select>
</form>
<button id="btn">按钮</button>
</div>
<script>
btn.onclick = function(){
//通过js提交表单
// form.submit();
//重置表单
form.reset();
}
</script>
- 通过js获得失去焦点
<div>
<input type="text" id="inp1">
</div>
<script>
inp1.focus();
//输入/删除内容就会触发oninput事件
inp1.oninput = function(){
// console.log("input");
if (this.value.length === 6) {
this.blur();
}
};
</script>
- 键盘事件
/*
*
* 按键按下
* keydown
* keypress（只响应能键入内容的键）
*
* 按键抬起
* keyup
*
* 能获得焦点的元素才有键盘事件
* （document window a 表单元素）
* */
/*document.onkeydown = function(e){
// console.log("keydown");
console.log(e);
};*/
/*document.onkeyup = function(e){
console.log("keyup");
};*/
/*window.onkeydown = function(e){
if (e.keyCode === 116) {
e.preventDefault();
}
};*/
document.onkeypress = function(e){
console.log(e.key, "onkeypress");
};
document.onkeydown = function(e){
console.log(e.key, "onkeydown");
};
- 控制盒子移动
<style>
*{margin:0;padding:0;font-family:"Microsoft Yahei";}
#box{
position: absolute;
left: 100px;
top: 100px;
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
(function(){
let oBox = document.getElementById("box");
document.onkeydown = function(e){
let keyCode = e.keyCode;
switch (keyCode) {
case 87://上
oBox.style.top = oBox.offsetTop - 5 + 'px';
break;
case 83://下
oBox.style.top = oBox.offsetTop + 5 + 'px';
break;
case 65://左
oBox.style.left = oBox.offsetLeft - 5 + 'px';
break;
case 68://右
oBox.style.left = oBox.offsetLeft + 5 + 'px';
break;
}
};
})();
</script>
- 组合按键移动
<style>
*{margin:0;padding:0;font-family:"Microsoft Yahei";}
#box{
position: absolute;
left: 100px;
top: 100px;
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
(function(){
let oBox = document.getElementById("box");
let up,down,left,right;
let ifUp,ifDown,ifLeft,ifRight;
document.onkeydown = function(e){
let keyCode = e.keyCode;
switch (keyCode) {
case 87://上
if (ifUp)return;
ifUp = true;
(function m(){
oBox.style.top = oBox.offsetTop - 5 + 'px';
up = requestAnimationFrame(m);
})();
break;
case 83://下
if (ifDown)return;
ifDown = true;
(function m(){
oBox.style.top = oBox.offsetTop + 5 + 'px';
down = requestAnimationFrame(m);
})();
break;
case 65://左
if (ifLeft)return;
ifLeft = true;
(function m(){
oBox.style.left = oBox.offsetLeft - 5 + 'px';
left = requestAnimationFrame(m);
})();
break;
case 68://右
if (ifRight)return;
ifRight = true;
(function m(){
oBox.style.left = oBox.offsetLeft + 5 + 'px';
right = requestAnimationFrame(m);
})();
break;
}
};
document.onkeyup = function(e){
let keyCode = e.keyCode;
switch (keyCode) {
case 87://上
cancelAnimationFrame(up);
ifUp = false;
break;
case 83://下
cancelAnimationFrame(down);
ifDown = false;
break;
case 65://左
cancelAnimationFrame(left);
ifLeft = false;
break;
case 68://右
cancelAnimationFrame(right);
ifRight = false;
break;
}
};
})();
</script>
8423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
