jQuery(3)——jQuery键盘事件

jQuery键盘事件


- keydown

在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码;

- keyup

用户松开某一个按键时触发,与keydown相对,返回键盘代码.

- keypress

在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效,换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。

经常配合这些方法使用的是 which 属性

which

which 属性指示按了哪个键或按钮。

一个demo,熟悉keydown,keyup,keypress和which的联系。


<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery键盘事件学习title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
    <script>
    $(document).ready(function(){
        $("body").keydown(
            function(event){
                $("#right").append("keydown 
"
); $("#left").append(String.fromCharCode(event.which)); //打印字母 //$("#test").append(event.which+"
"); //输出ASCII码
//alert(event.which) } ); $("body").keyup( function(event){ $("#right").append("keyup
"
); } ); $("body").keypress( function(event){ $("#right").append("keypress
"
); } ); })
script> <style> #main{ width:800px; height: auto; margin:0 auto; border:2px solid green; overflow: hidden; } #left,#right{ width: 396px; height: 300px; background-color: rgb(245, 172, 76); border:2px solid yellow; word-wrap:break-word; } #left,#right{ float:left; } #right{ overflow: auto; } style> head> <body> <div id="main"> <div id="left">div> <div id="right">div> div> body> html>

在线预览:
按几个字符键位测试

width="100%" height="300" scrolling="no" title="jQuery键盘事件" src="//codepen.io/liantao/embed/gBbMoB/?height=300&theme-id=34712&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen jQuery键盘事件 by 练涛 ( @liantao) on CodePen.

See the Pen jQuery键盘事件 by 练涛 (@liantao) on CodePen.

你可能感兴趣的:(jQuery学习)