码迷,mamicode.com
首页 > 其他好文 > 详细

事件类型(键盘事件)

时间:2019-12-21 18:22:19      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:ble   pat   html   round   OLE   代码   数字   console   title   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件类型(键盘事件)</title>
    <!-- 
        onkeydown;键盘按下触发(比onkeypress先触发)
        onkeypress;按下键盘按键时触发,只对字母/数字字符有效;在任何浏览器中,onkeypress 事件不会被所有按键触发(例如 ALT、CTRL、SHIFT、ESC)。
        onkeyup;键盘松开触发
        keyCode;返回onkeydown/onkeypress/onkeyup事件触发的键的值的字符代码,或键的代码

        tip:    onkeydown和onkeypress的区别:1)响应的按键不同;2)优先触发onkeydown,再执行onkeypress
     -->
     <style>
         #inp{
             width: 200px;
             height: 80px;
         }
     </style>
</head>
<body>
    <input id="inp" type="textarea">
    <script>
        var inp=document.getElementById("inp");
        //onkeydown
        inp.onkeydown=function (){
            console.log("我按下了按键");//按下按键触发
        }
        //onkeypress
        inp.onkeypress=function (event){
            console.log("我按了字母/数字字符键");//按字母/数字/字符键触发
        //keycode
            console.log(event.keyCode);//返回按键得值的代码
        }
        //onkeyup
        inp.onkeyup=function (){
            console.log("我松开了按键");//松开按键触发
        }
    </script>
</body>
</html>

事件类型(键盘事件)

标签:ble   pat   html   round   OLE   代码   数字   console   title   

原文地址:https://www.cnblogs.com/vinson-blog/p/12077527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!