vue.js는 키보드 이벤트를 수신합니다.

Vue는 키보드를 모니터링하고 @를 사용하여 직접 바인딩하며 Vue는 일반적으로 사용되는 여러 키에 대한 별칭을 제공하므로 keyCode

#🎜 🎜#

모든 주요 별칭

.enter

.tab

.delete("삭제" 및 " 후퇴 "격자" 키)

          . .down

#🎜 🎜# .left

.right

1 . 입력 레이블을 esc 키에 바인딩합니다. 🎜🎜#

<input type="text" @keyup.esc="KeyUpEsc">

<script></script>에서 이벤트 바인딩

KeyUpEsc:function(){
      alert("监听到esc键")
  }

# 🎜🎜#함수 렌더링

2. 요소 구성 요소 라이브러리의 el-input 태그를 사용하고 삭제를 바인딩합니다. key

#🎜 🎜# 바인딩 이벤트

<el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input>

이번에는 바인딩 이벤트에 추가 .native 수정자가 있는 이유는 무엇입니까? element-ui는 입력에 div를 캡슐화하기 때문에 라벨 외부에는 원래 이벤트가 숨겨지므로 .native가 추가되지 않으면 키 입력이 적용되지 않습니다

<script></script>> ;

 KeyUpDelete :function(){
      alert("监听到delete键")
  },

#🎜🎜에 정의된 이벤트 #

3에 정의된 이벤트는 입력 레이블을 가져올 때만 키보드를 모니터링할 수 있다는 것입니다. 다음은 Enter 키의 전역 모니터링입니다(로그인 페이지에서 일반적으로 사용됨).

 created: function() {
        var _this = this;
        document.onkeydown = function(e) {
            let key = window.event.keyCode;
            if (key == 13) {
                _this.submit();
            }
        };
    },

   methods: {
        submit: function() {
            alert("监听到enter键");
        },
   }

렌더링은 다음과 같습니다. picture

#🎜🎜 #js에 대해 자세히 알아보려면 저를 클릭하세요.

js tutorial

위 내용은 vue.js는 키보드 이벤트를 수신합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!