JavaScript_常用键盘事件

最新推荐文章于 2023-08-25 17:53:46 发布
最新推荐文章于 2023-08-25 17:53:46 发布
阅读量154 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44500833/article/details/117447856
版权
常用键盘事件
键盘事件触发条件
onkeyup某个键盘按键松开时触发
onkeydown某个键盘按键按下时触发
onkeypress某个键盘按键被按下时触发，但是它不识别功能键，比如ctrl、方向键等

3个事件的执行顺序：
onkeydown
onkeypress
onkeyup
键盘事件对象（e）
对象属性返回
.key按键值
.keyCode按键值的ascii值

注意：

  1. keyup和keydown事件不区分字母大小写，a和A的keyCode都是65。
  2. keypress会区分大小写，a是97，A是65。
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>
按键获字
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .search {
        width: 15%;
        position: relative;
        margin-top: 10%;
    }
    
    input {
        width: 100%;
    }
    
    .con {
        display: none;
        width: 100%;
        height: 128%;
        box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
        padding: 1px 3px;
        line-height: 184%;
        position: absolute;
        top: -165%;
    }
    
    .con::before {
        content: "";
        width: 0;
        height: 0;
        border: 6px solid;
        border-color: white transparent transparent;
        position: absolute;
        top: 100%;
        left: 20%;
    }
</style>

<body>
    <div class="search">
        <div class="con"></div>
        <input type="text" placeholder="请输入您的快递单号">
    </div>
</body>
<script>
    var con = document.querySelector('.con');
    var input = document.querySelector('input');
    input.addEventListener('keyup', function() {
        if (this.value == '') {
            con.style.display = 'none';
            con.innerHTML = ''
        } else {
            con.style.display = 'block'
            con.innerHTML = this.value
        }
    })
    input.addEventListener('blur', function() {
        con.style.display = 'none'
    })
    input.addEventListener('focus', function() {
        con.style.display = 'block'
    })
    document.addEventListener('keyup', function(e) {
        // console.log(e.keyCode);
        if (e.keyCode == 83) {
            input.focus()
        }
    })
</script>

</html>
  1. 快递单号输入内容时，上面的大号盒子（con）显示这里的文字
  2. 同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）做为内容
  3. 如果快递单号里面内容为空，则隐藏大号字体盒子（con）盒子
  4. keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有写入文本框中。
  5. keyup事件触发的时候，文字已写入文本框
HarryFooty
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（886）：常用的键盘事件
歌谣的博客
04-18 536
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码
最新发布
06-27
JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例...
onKeypress 与onKeyDown 事件在键盘中所代表数值的差异
我是星星的博客
09-10 1013
onKeydown();键盘按下时触发 onKeyup();键盘抬起时触发 ononKeypress();键盘按下后抬起才会触发，我理解为上面两个事假的集合 今天在做个项目时，发现onKeydown()和ononKeypress()之间一点细微的差别 document.onkeydown=function(e){ e=e||window.event; console.l...
JavaScript-----键盘事件
weixin_45904557的博客
06-13 1164
onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下时触发惇但是它不识别功能键比如ctrl shift箭头等
使用JS监听键盘按下事件
热门推荐
CY的博客
04-06 1万+
详细的JS监听键盘按下事件
09JavaScript中的事件（键盘事件、执行多次事件、事件冒泡、事件委派）
weixin_47316183的博客
04-27 589
1、JS事件（1）点击事件：onclick（2）双击事件：ondblclick（3）失去焦点：onblur（4）获得焦点：onfocus（5）鼠标移入：onmouseover（6）鼠标移出：onmouseout（7）鼠标移动：onmousemove（8）窗口尺寸被调整：onresize（9）按下鼠标：onmousedown（10）松开鼠标：onmouseup（11）滚动鼠标滚轮：onmousewh...
JavaScript键盘事件常见用法实例分析
10-17
主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要的朋友可以参考下
JavaScript常用事件介绍
12-12
JavaScript事件是网页交互的核心，它允许开发者在特定的用户行为或状态变化时执行代码。JavaScript事件分为多种类型，包括但不限于以下几种： 1. **鼠标事件**： - `onclick`：鼠标点击元素时触发。 - `...
javaScript常用事件
09-19
本文将详细介绍JavaScript中的一些常用事件及其应用。 1. `onclick`事件：当用户点击指定的对象，如按钮、复选框、单选按钮等，`onclick`事件会被触发。例如，在表单中添加一个按钮，当点击时执行`change()`函数： ...
baifenbiao.rar_javascript_表格_选中 显示
09-20
在IT行业中，JavaScript是一种常用的客户端脚本语言，广泛应用于网页和网络应用开发。在这个名为"baifenbiao.rar"的压缩包中，我们主要探讨的是一个与JavaScript相关的表格程序，特别是关于表格的选中和显示功能。这...
javascript 键盘事件总结 推荐
12-12
在form中， submit的快捷键是 enter，reset的快捷键是 esc。不过在IE6,safari4,ff3.5,opera10,chrome中，按Enter，不但激发form的submit事件，同时也会激发提交按钮的onclick，激发顺序为提交按钮的 onclick →　form 的 onsubmit。 键盘事件 键盘事件 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]不过并不止提交按钮会激发form的submit事件，连同上面的归纳如下： 1. 如果表单里有一个type=”submit”的按钮，回车键生效。 2. 如果表单里只有一个type=”te
JS 事件类型之键盘事件
dfkjhfkshf的博客
08-25 141
【代码】JS 事件类型之键盘事件。
[JavaScript] 常用的键盘事件
qq_49900295的博客
03-13 7197
文章目录常用的键盘事件键盘事件对象示例练习：模拟京东按键输入内容 常用的键盘事件 事件除了使用鼠标触发，还可以使用键盘触发 我们主要学习以下三个键盘事件： 这里举一下onkeyup的示例，当我们按键弹起的时候事件触发： document.addEventListener('keyup', function() { console.log('弹起'); }) 只要我按键弹起一次，控制台就会输出一次。 键盘事件对象 注意: onkeydown和onkeyup 不区分字母大小写，onkeypre
javaScript中的键盘事件
weixin_66990569的博客
10-11 1413
键盘上的某个键被按下时触发。keyCode返回按键在ASCII码对照表中的值，利用keyCode可判断键盘上的哪个键被按下
【JavaScript 教程】事件——键盘事件
油墨香^-^的博客
06-08 1870
作者 | 阮一峰 键盘事件的种类 键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。 keydown：按下键盘时触发。 keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。 keyup：松开键盘时触发该事件。 如果用户一直按键不松开，就会连续触发键盘事件，触发的顺
JavaScript14——常用的键盘事件
小白的学习路
11-14 325
1.1. 常用的键盘事件 1.1.1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keypress', function() {
常用的键盘事件
DF_jie的博客
11-24 1066
键盘事件 键盘事件 事件案例： <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊 docu
JavaScript的键盘事件（上）
weixin_43228946的博客
08-21 274
键盘事件： onkeydown：按下按键，如果我们一直按着按键，那么就会一直触发事件。 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，浏览器这种设计就是为了防止误操作。 onkeyup：松开按键 我们可以通过事件event，获取keyCode,我们可以借助keyCode获取按键对应的编码。比如26个英文字母对应的编码是65到90，a对应65，b对应66，.....,z对应90。 如果在onkeydown中取消了默认行为，就是return false，则输入的内
javascript中常用鼠标事件和键盘事件
lx__angel的博客
12-10 1454
常见的HTML事件
03B、Javascript程序设计(下)v21
08-03
1. **事件绑定**：JavaScript通过`addEventListener`或`attachEvent`方法将事件（如鼠标点击、键盘输入）与预定义的事件处理程序（函数）绑定。例如，当用户点击页面上的按钮时，`showMessage`函数会被调用并显示一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值