js常用的键盘事件和对象
- 3个常用事件
- 键盘事件对象之keyCode
- 使用事件keydown和keyCode模拟京东按钮输入内容
- 使用事件keyup实现该功能
- 知识来源
3个常用事件
// 常见的键盘事件
// 1.keyup按键弹起的时候触发
// document.onkeyup = function(){
// console.log('我弹起了');
// }
document.addEventListener('keyup',function(){
console.log('我弹起了');
})
// 2.keydown 按键按下的时候触发
document.addEventListener('keydown',function(){
console.log('我按下了');
})
// 3.keypress 按键按下的时候触发(但是不识别功能键 比如ctrl shift)
document.addEventListener('keypress',function(){
console.log('我按下了11');
})
键盘事件对象之keyCode
//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener(‘keyup’,function(e){
// console.log(e);
console.log(‘up:’+e.keyCode);
// 我们可以利用keyCode返回的ASCII码值来判断用户按下了能够键
if(e.keyCode === 65){
alert(‘您按下的a键’);
}else{
alert(‘您没有按下a键’);
}
})
// 1.我们的keyup和keydom事件不区分字母大小写 a 和 A 得到的都是65
// 2.我们的keypress 事件 区分字母大小写
//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener(‘keypress’,function(e){
// console.log(e);
console.log(‘press:’+e.keyCode);
})
// onkeydown和onkeyup 不区分字母大小写,onkeypress区分字母大小写
// 在我们实际开发中,我们更多的是使用keydown和keyup,它能够识别所有的键(包括功能键)
// Keypress不识别功能键,但是keyCode属性能够区分大小写,返回不同的ASCII值
使用事件keydown和keyCode模拟京东按钮输入内容
效果如下:用户不需要使用鼠标在搜索框里点击,只需要按下键盘中的"s"键就能够focus到搜索框。
点击"s"前:
点击"s"后:
/*
1.核心思路:检测用户是否按下了s键,如果按下s键,就把光标定位到搜索框里面
2.使用键盘事件对象里面的keyCode,判断用户按下的是否是s键
3.搜索框获得焦点:使用js里面的focus()方法
*/
var search = document.querySelector('input');
document.addEventListener('keydown',function(e){
console.log(e.keyCode);
if(e.keyCode === 83){
search.focus();
}
})
使用事件keyup实现该功能
效果如下:
核心思想:
// 1.快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)
// 2.表单检测用户输入: 给表单添加键盘事件
// 3.同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容
// 4.如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子
代码实现:
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -40px;
width: 171px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function() {
// console.log('输入内容啦');
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerText = this.value;
}
})
// 当我们失去焦点,就隐藏这个con盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
// 当我们获得焦点,就显示这个con盒子
jd_input.addEventListener('focus', function() {
if (this.value !== '') {
con.style.display = 'block';
}
})