JavaScriptDOM(七)键盘事件

本文介绍了键盘事件,包括keypress、keydown和keyup,以及如何利用它们监听用户输入。通过示例代码展示了如何检测用户是否按下特定键(如s键)并进行相应操作。此外,还提供了一个实际案例,说明如何在文本框输入时实时显示放大版的输入内容,并在失去焦点时隐藏。通过添加键盘事件,可以增强网页应用的交互性和用户体验。
摘要由CSDN通过智能技术生成

一、键盘事件的常用方法

键盘事件是指用户在使用键盘时触发的事件。例如,用户按Esc键关闭打开的状态栏,按Enter键直接完成光标的上下切换等。常用的键盘事件如下表所示。

事件名称

事件触发时机

keypress

某个键盘按键被按下时触发,不识别功能键,如Ctrl、Shift、箭头等

 keydown

某个键盘按键被按下时触发

keyup

某个键盘按键被松开时触发

注意:keypress事件保存的按键值是ASCII码,keydown和keyup事件保存的按键值是虚拟键码,keydown和keypress如果按住不放的话,会重复触发该对应事件。keyup和keydown事件不区分字母大小写,而keypress区分字母大小写。

二、键盘事件对象

键盘事件对象KeyBoardEvent,是跟键盘事件相关的一系列信息的集合,根据键盘事件对象中的keyCode属性可以得到相应的ASCII码值,进而可以判断用户按下了哪个键。

案例演示:检测用户是否按下了s键,如果按下s 键,就把光标定位到搜索框里面,示例代码如下。

<body>
  <input type="text">
  <script>
    var search = document.querySelector('input');
    document.addEventListener('keyup', function (e) {
      if (e.keyCode === 83) {
        search.focus();
      }
    });
  </script>
</body>

三、案例(文本框提示信息)

案例需求:在现实生活中,我们经常会使用快递单号查询功能,查看商品的物流信息状态。有时在用户输入单号时,网站为了让用户看清楚输入的内容,会在文本框上方显示一个提示栏,将用户输入的数字放大。

案例分析:当用户在文本框中输入内容时,文本框上面自动显示大号字的内容。如果用户输入为空,需要隐藏大号字内容。

浏览器预览效果如下图所示:

 1、编写HTML代码

<body>
  <div class="search">
    <div class="con"></div>
    <label>快递单号:
       <input type="text" placeholder="请输入您的快递单号" class="num">
     </label>
  </div>
</body>

2、检测用户输入,给表单添加键盘事件

<script>
  var con = document.querySelector('.con');
  var numInput = document.querySelector('.num');
  numInput.addEventListener('keyup', function () {
    if (this.value == '') {  con.style.display = 'none';} 
   else {
      con.style.display = 'block'; con.innerText = this.value;
    }
  }); // …在此处编写失去焦点和获得焦点代码 
</script>

3、失去焦点,隐藏con元素

num_input.addEventListener('blur', function() {
  con.style.display = 'none';
})

4 、获得焦点,显示con元素

num_input.addEventListener('focus', function() {
  con.style.display = 'block';
})

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值