對vue鍵盤回車事件的實例講解

如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，則要加上native限制符，因為element-ui把input進行了封裝，原事件就不起作用了，代碼如下：

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)簡陽免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

<input v-model="form.name" placeholder="昵稱" @keyup.enter="submit">
<el-input v-model="form.name" placeholder="昵稱" @keyup.enter.native="submit"></el-input>

現(xiàn)在發(fā)現(xiàn)這個鍵盤事件好像對input框支持比較好，其他的元素多少會有點問題，或者直接無效，究其原因是其他的元素沒有獲取焦點或者沒有鍵盤事件。

我現(xiàn)在的解決方式，

如果是沒有鍵盤事件使用css把input框絕對定位到需要綁定鍵盤事件的元素之上并且把input框設(shè)置為透明，把該input框與原來要綁定鍵盤事件的元素進行綁定，達到效果；

test.vue

<div class="container">
 <input class="item opa" @keyup="deleteDiv">
 <div class="item">div內(nèi)容</div>
 <span click="DeleteDiv">X</span>
</div>

css：

div.container{
 position:relative;
}
.item{
 position:absolute;
 top:0;
 left:0;
 width:100px;
 height:100px;
 border:1px solid #ccc;
}
.opa{
 opacity:0;
 z-index:5;
}
span{
 position:absolute;
 top:5px;
 right:5px;
 z-index:10;
}

js：

methods:{
 deleteDiv(){
 alert("delete");
 }
}

如果是沒有獲取焦點，則可以寫一個自定義指令自動獲取焦點，

自動獲取焦點自定義指令見我另一篇文章 點擊進入

拓展知識：vuejs 2.0 鍵盤事件詳解

如下所示：

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="vue.js"></script>

 <script type="text/javascript">
 window.onload = function(){
  var vm = new Vue({
  el:'#box',
  methods:{
   show:function(ev){
   if(ev.keyCode == 13){
    alert('你按回車鍵了');
   }
   },
  }
  });
 }
 </script>
</head>
<body>
 <div id="box">
 <input type="text" placeholder="請輸入" @keyup="show($event)"> 

 <input type="text" placeholder="請輸入" @keyup.13="show($event)">
 </div>
</body>
</html>

當(dāng)按下鍵盤的時候，執(zhí)行show方法，然后再去執(zhí)行相應(yīng)的業(yè)務(wù)。

兩個input的效果都是一樣的如果安13 也就是按鍵 enter 才會執(zhí)行彈窗！！

@keyup.13 回車

@keyup.enter 回車

@keyup.left 左鍵

@keyup.right 右鍵

@keyup.up 上鍵

@keyup.down 下鍵

@keyup.delete 刪除鍵

以上這篇對vue 鍵盤回車事件的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標(biāo)題：對vue鍵盤回車事件的實例講解
當(dāng)前地址：http://bm7419.com/article40/gejseo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、電子商務(wù)、網(wǎng)站制作、外貿(mào)建站、微信小程序、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容