在vue项目当中绑定键盘事件

Posted 2023-04-01 ZHANG.......

在vue项目当中，有时会遇到为文本输入框或者button按钮绑定键盘事件，最常见的就是enter回车事件。

按照vue官网给出的方法是：

v-on:keyup.enter

简写：@keyup.enter （注意：如果是绑定在组件上的话，需要加 native 修饰符）

<el-input
          v-focus
          :placeholder="$t('enterPoolName')"
          v-model.trim="strPool"
          :maxlength="100"
          @keyup.enter.native="handleSearchMember"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>

但是，这种方式只能是在获取焦点的时候起作用，如果失去焦点，则无法执行键盘事件。

如果，项目有需求在失去焦点的时候，任然能够执行相应的键盘事件，完成既定的行为动作，诸如提交表单验证等等。

那就需要采取常规的方法，将键盘事件绑定在document文档上，然后通过获取键盘上各个按键的值，进行键盘事件的执行响应。

mounted() 
    const that = this;
    document.addEventListener('keydown', that.handleWatchEnter);
  ,
  methods: 
    handleWatchEnter(e) 
      var key = window.event ? e.keyCode : e.which;
      console.log(key);
      if (key === 13) 
        // 这里执行相应的行为动作
        console.log('++++');
      
    ,

以下是键盘上各个案件对应的数值，以及vue键盘事件的写法：

 vue中的扣键盘事件：
@keydown （键盘按下时触发）；

@keypress（按键按住时触发）；

@keyup（键盘弹起）；

获取按键的键码 e.keyCode；

@keyup.13  按回车键；

@keyup.enter  回车；

@keyup.up  上键；

@keyup.down  下键；

@keyup.left  左键；

@keyup.right  右键；

@keyup.delete  删除键；

React 事件对象键盘事件表单事件ref获取dom节点react实现类似Vue双向数据绑定

1、案例实现代码

import React, { Component } from ‘react‘;

/**
 * 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
 * 事件对象: 在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件有关的信息
 * 表单事件: 获取表单的值
 *      1、监听表单的改变事件    ---onChange
 *      2、在改变的事件里面获取表单输入的值   ---event
 *      3、把表单输入的值赋值给username    ---inputChange
 *      4、点击按钮的时候获取state里面的username   ---getInput
 * ref获取dom节点: 获取表单的值
 *      1、监听表单的改变事件    ---onChange
 *      2、在改变的事件里面获取表单输入的值   ---ref
 *      3、把表单输入的值赋值给username    ---inputChange
 *      4、点击按钮的时候获取state里面的username   ---getInput
 *键盘事件:
 *      1、onKeyUp
 *      2、onKeyDown
 *react实现类似Vue双向数据绑定
 *      1、 <input  value={this.state.username} onChange={this.inputChange1}/>
 *      2、inputChange1=(e)=>{
                this.setState({
                    username:e.target.value
                })
            }
 *
 */
class Home5 extends Component{
    constructor(props){
        super(props);
        this.state={
            title:‘这是Home5‘,
            username:"杨文杰"
        }
    }

    /**
     * 一般通过这个事件对象获取Dom节点，即event.target
     * 通过event获取dom属性，即event.target.getAttribute
     * @param event 事件对象
     */
    run=(event)=>{
        alert(this.state.title)
        alert(event.target) ;//获取Dom节点 ，一般也只是获取Dom节点
        event.target.style.background=‘red‘;
        //获取Dom的属性的值
        alert(event.target.getAttribute(‘aid‘))
    }
    /**
     * 获取表单的值
     * @param e
     */
    inputChange=(e)=>{

        console.log(e.target.value);
        this.setState({
            username:e.target.value
        });
    }
    getInput=()=>{
        alert(this.state.username)
    }

    /**
     * Ref获取表单值
     * @param e
     */
    inputChangeRef=(e)=>{
        /**
         * 获取Dom节点
         *      1、给元素定义ref属性
         *              <input ref="username" />
         *      2、 通过this.refs.username 获取Dom节点
        */
        let val = this.refs.username.value;
        this.setState({
            username:val
        })
    }
    getInputRef=()=>{
        alert(this.state.username)
    }

    /**
     * 键盘事件
     * @param e
     */
    inputKeyUp=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode){
            alert(e.target.value);
        }
    }

    inputKeyDown=(e)=>{
        console.log(e.keyCode);
        if(e.keyCode){
            alert(e.target.value);
        }
    }

    /**
     * 双向数据绑定
     * @param e
     */
    inputChange1=(e)=>{
        this.setState({
            username:e.target.value
        })
    }

    changeUsernameValue=(e)=>{
        this.setState({
            username:"改变了"
        })
    }
    render(){
        return(
            <div>
                {this.state.title}
                <p>事件对象演示</p>
                <button aid ="123" onClick={this.run}>事件对象</button>
                <br/>
                <p>表单事件对象演示</p>
                <input onChange={this.inputChange}/><button onClick={this.getInput}>获取input输入框值</button>
                <br/>
                <p>表单事件对象演示---ref获取表单值</p>
                <input ref="username" onChange={this.inputChangeRef}/><button onClick={this.getInputRef}>获取input输入框值</button>
                <br/>
                <p>键盘事件</p>
                <input onKeyUp={this.inputKeyUp}/><button>键盘事件</button>
                <br/>
                <input onKeyDown={this.inputKeyDown}/><button>键盘事件</button>
                <br/>
                <p>双向数据绑定---model改变影响view view改变反过来影响model</p>
                <input  value={this.state.username} onChange={this.inputChange1}/>
                {this.state.username}
                <br/>
                <button onClick={this.changeUsernameValue}>双向数据修改</button>
            </div>
        )
    }
}
export  default  Home5;