键盘事件
keydown 按键按下
var oIpt = document.querySelector('input');
oIpt.onkeydown = function(e){
console.log('有按键按下了');
console.log(e.keyCode); //按键键值
console.log(e.key); //按键类型
}
keyup 按键抬起
var oIpt = document.querySelector('input');
oIpt.onkeyup = function(){
console.log('有按键抬起了');
}
keypress 按键按下就会触发
实际执行效果与 keydown 是一样的
var oIpt = document.querySelector('input');
oIpt.onkeypress = function(){
console.log('有按键一直按下');
}
问题:
1.不是所有的标签对象,都支持键盘事件
只有能获取焦点的标签对象,才支持键盘事件
input,textarea,button,select,a,iframe
或者 绑定给 document , body , html 和 window
2. 事件对象
在绑定的匿名函数中,添加一个形参
形参的命名 可以是任意的名称 一般定义为 e 或者 event 表示是 事件对象
执行程序时, JavaScript程序,会自动向形参中存储数据,存储的是触发事件的事件对象的相关信息
如果是 鼠标触发的事件 存储的是 鼠标相关的 信息 ,例如 点击坐标,位置,点击的标签等等
如果是 键盘事件 存储的是 键盘按键先关的 信息 ,例如 按键的编号,名称,等等
e.key 存储的是按键的名称 数值键和小键盘数字键, e.key 是相同的结果
e.keycode 键盘按键的编号 所有计算机语言 所有键盘,相同键位,键盘编号是相同的
使用这个属性来区别判断,按下的按键
ctrlKey true 就是 按下了, false 是没有按
altKey true 就是 按下了, false 是没有按
shiftKey true 就是 按下了, false 是没有按
低版本火狐浏览器,没有 keyCode属性 触发 按键按下事件,通过 e.which 来获取 按键编号
var code = e.keyCode || e.which
// 多按键判断 ctrl + alt + y
// ctrlKey 是 true altKey 也是 true keyCode 是 y 的编号 89
document.onkeydown = function(e){
console.log(e);
if(e.ctrlKey === true && e.altKey === true && e.keyCode === 89){
console.log('三个键都按下了');
}
}
键盘dome
1.需要通过 e.keyCode 获取 按键编号
直接输入英文,和,中文输入法,获取的 e.keyCode 是不同的
2.设定极值
在 父级div 中 绝对定位
极值: 最小 是 0
最大 是 父级标签宽度 / 高度 - 子级标签宽高 / 高度
htmlcssjs
<div class="box">
<div class="inner"></div>
</div>
.box{
width: 800px;
height: 800px;
background: pink;
position: relative;
}
.inner{
width: 100px;
height: 100px;
background: orange;
position: absolute;
top: 0;
left: 0;
}
// 获取标签css样式的兼容语法函数
// 参数1: 需要获取样式的标签对象
// 参数2: 需要获取样式的属性名称
function myGetStyle(element, style) {
// 如果 浏览器 支持 window.getComputedStyle 执行结果有内容,自动转化为 true
// 如果 浏览器 不支持 window.getComputedStyle 执行结果,为undefined,自动转化为 false
if (window.getComputedStyle) {
// window.getComputedStyle 转化为 true 的情况
// 也就是 浏览器 支持 window.getComputedStyle 可以使用
return window.getComputedStyle(element)[style];
} else {
// window.getComputedStyle 转化为 false 的情况
// 浏览器不支持 window.getComputedStyle 方法 不能使用
return element.currentStyle[style];
}
}
// 橙色div,移动的div
var oInner = document.querySelector('.inner');
// 给整个文档添加 键盘事件
document.onkeydown = function(e){
// 根据不同的按键,执行不同的操作
// e.keyCode 来判断按键
// 左
if( e.keyCode === 37 ){
// 按的是 左键 div应该左移
// left 值 在原有数值基础上 -= 一个数值
// 获取橙色div,原始left定位数值,并且只要数值部分,去除px单位
var oldLeft = parseInt( myGetStyle(oInner , 'left') );
// 减等一个固定的数值
oldLeft -= 10;
// 设定极值: left定位 最小是 0
// 三元运算符,如果小于0,就赋值0,如果不小于0,就是本身
oldLeft = oldLeft < 0 ? 0 : oldLeft; // 将新的数据,赋值给橙色div,当前oldLeft 只有数值,需要拼接px单位 oInner.style.left = oldLeft + 'px'; } // 右 if( e.keyCode === 39 ){ // 按的是 右键 div应该右移 // left 值 在原有数值基础上 += 一个数值 // 获取橙色div,原始left定位数值,并且只要数值部分,去除px单位 var oldLeft = parseInt( myGetStyle(oInner , 'left') ); // 减等一个固定的数值 oldLeft += 10; // 设定极值: left定位 最大值 父级div宽度 - 橙色div宽度 // 大于 最大定位值 700 就 赋值700 否则就是本身 oldLeft = oldLeft > 700 ? 700 : oldLeft;
// 将新的数据,赋值给橙色div,当前oldLeft 只有数值,需要拼接px单位
oInner.style.left = oldLeft + 'px';
}
// 上
if( e.keyCode === 38 ){
// 按的是 上键 div应该上移
// top 值 在原有数值基础上 -= 一个数值
// 获取橙色div,原始left定位数值,并且只要数值部分,去除px单位
var oldTop = parseInt( myGetStyle(oInner , 'top') );
// 减等一个固定的数值
oldTop -= 10;
// 设定极值: top 的最小值 是 0
// 如果 小于 0 就赋值 0 不小于0 就赋值本身
oldTop = oldTop < 0 ? 0 : oldTop; // 将新的数据,赋值给橙色div,当前oldLeft 只有数值,需要拼接px单位 oInner.style.top = oldTop + 'px'; } // 下 if( e.keyCode === 40 ){ // 按的是 下键 div应该下移 // top 值 在原有数值基础上 += 一个数值 // 获取橙色div,原始left定位数值,并且只要数值部分,去除px单位 var oldTop = parseInt( myGetStyle(oInner , 'top') ); // 减等一个固定的数值 oldTop += 10; // 设定极值: top定位 最大值 父级div宽度 - 橙色div宽度 // 大于 最大定位值 700 就 赋值700 否则就是本身 oldTop = oldTop > 700 ? 700 : oldTop;
// 将新的数据,赋值给橙色div,当前oldLeft 只有数值,需要拼接px单位
oInner.style.top = oldTop + 'px';
}
}
Comments | NOTHING