jQuery之键盘事件:keyUp()、keyDown()、keyPress()

469 阅读1分钟
<!DOCTYPE html>
<html lang="en">

<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">
    <h3></h3>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        /* 按住不松会一直触发keydown */
        $('input').keydown(function(){
             console.log('按下键盘时')
        })
        
        $('input').keyup(function(){
             console.log('释放按键时')
        })
        
        /* keypress代表键盘敲击过程中产生的事件 */
        但是键盘按下的时候触发,抬起不触发,一直按不送也会连续触发 */
        $('input').keypress(function(){
              console.log('产生可打印的字符时')
        })
     </script>
</body>
</html>

防抖:实现输入整个语句结束的时候,再打印向后台发送请求

       let timer; //定义一个定时器
       $('input').keyup(function () {
            /* 思路:每次up抬起时先清除之前的定时器 */
            clearTimeout(timer)
            /* 每敲击一个字母都会执行下面的话 */
            /* 定时器会产生一个唯一的id */
            /* 每次都会根据唯一的id 把之前的定时器清空,所以就会以最后一次的抬起获取的val值为准 */
            timer = setTimeout(function () {
                console.log('把'+$('input').val()+'发送给后台')
            }, 800)
       })

如何解决定时器里面找不到当前匹配元素的this?
答:把当前能获取到input的this,用一个变量that存起来,在定时器里面使用这个变量that来调用。

       /* this是谁调用就是谁的 */
       let timer;
       $('input').keyup(function(){
           clearTimeout(timer)
           let that = this;
           timer = window.setTimeout(function(){
              console.log($(that).val())
          },500)
       })

写一个input在里面输入字的时候可以实时显示再h3标签中,按1键把input里面输入的文字通过alert打印出来

       $(document).keyup(function(e){
            if(e.keyCode == 49){ //"1"的keyCode值为49,keyCode解释见下个例子
                alert($('input').val())
            }
       })
        $(document).keyup(function(e){
             /* e代表事件源对象 */
             /* 每一个按键都有对应的keyCode */
            console.log(e);
             if(e.keyCode=='13'){ //enter键的keyCode值为13
                 alert('提交成功!')
             }
        })