JS——键盘事件和输⼊框案列
能够说出常⽤的3-5个键盘事件
能够知道如何获取当前键盘按下的是哪个键
键盘事件
<script>
// 常⽤的键盘事件
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup',function(){
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发不能识别功能键⽐如 ctrl shift 左右箭头啊
document.addEventListener('keypress',function(){
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发能识别功能键⽐如 ctrl shift 左右箭头啊
document.addEventListener('keydown',function(){
console.log('我按下了down');
})
// 4. 三个事件的执⾏顺序  keydown -- keypress -- keyup
</script>
使⽤keyCode属性判断⽤户按下哪个键
keyup和keydown不区分⼤⼩写
keypress区分⼤⼩写
<script>
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup',function(e){
// 我们可以利⽤keycode返回的ASCII码值来判断⽤户按下了那个键
if(e.keyCode ===65){
alert('您按下的a键');
}else{
alert('您没有按下a键')
}
})
document.addEventListener('keypress',function(e){blur事件
// console.log(e);
console.log('press:'+ e.keyCode);
})
</script>
案列：s定位焦点
var search = document.querySelector('input');
document.addEventListener('keyup',function(e){
if(e.keyCode ===83){
search.focus();
}
});
模拟京东快递单号查询。输⼊内容出现⼤框框。
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输⼊您的快递单号"class="jd"> </div>
<script>
// 获取要操作的元素
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
// 给输⼊框注册keyup事件
jd_input.addEventListener('keyup',function(){
// 判断输⼊框内容是否为空
if(this.value ==''){
// 为空，隐藏放⼤提⽰盒⼦
con.style.display ='none';
}else{
/
/ 不为空，显⽰放⼤提⽰盒⼦，设置盒⼦的内容
con.style.display ='block';
con.innerText =this.value;
}
})
// 给输⼊框注册失去焦点事件，隐藏放⼤提⽰盒⼦
jd_input.addEventListener('blur',function(){
con.style.display ='none';
})
// 给输⼊框注册获得焦点事件
jd_input.addEventListener('focus',function(){
/
/ 判断输⼊框内容是否为空
if(this.value !==''){
// 不为空则显⽰提⽰盒⼦
con.style.display ='block';
}
})
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。