對vue 鍵盤回車事件的實例講解
如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，則要加上native限制符，因為element-ui把input進行了封裝，原事件就不起作用了，代碼如下：
<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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中實現(xiàn)methods一個方法調(diào)用另外一個方法
下面小編就為大家分享一篇vue中實現(xiàn)methods一個方法調(diào)用另外一個方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue-pdf實現(xiàn)文件在線預(yù)覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue實現(xiàn)路由不變的情況下，刷新頁面操作,結(jié)合實例形式分析了vue路由不變的情況下刷新頁面具體原理、操作方法與相關(guān)注意事項,需要的朋友可以參考下2020-02-02
我們就來實現(xiàn)這樣一個Vue自定義指令v-time，將表達式傳入的時間戳實時轉(zhuǎn)換為相對時間。下面小編給大家?guī)砹耸褂肰ue開發(fā)一個實時性時間轉(zhuǎn)換指令，需要的朋友參考下吧2018-01-01
這篇文章主要介紹了Vue3 Teleport 組件的實踐及原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue中keep-alive組件使用和一些基礎(chǔ)配置方法
本文主要介紹了Vue中keep-alive組件的使用方法和一些基礎(chǔ)配置,keep-alive是Vue中的一個抽象組件,可以緩存組件實例,提高性能,本文給大家介紹vue中keep-alive組件使用和一些基礎(chǔ)配置方法,感興趣的朋友一起看看吧2024-10-10
這篇文章主要介紹了Vue filter介紹及詳細使用,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
Vue @click.stop阻止事件向祖先元素傳遞方式(事件冒泡)
在Vue中,使用@click.stop修飾符可以阻止事件向父級元素傳遞,從而實現(xiàn)單擊父級元素執(zhí)行函數(shù),而單擊子元素不執(zhí)行函數(shù)的需求2025-02-02
如何修改element-ui中tree組件的icon圖標(biāo)(小白都會的前端技能)
這篇文章主要給大家介紹了關(guān)于如何修改element-ui中tree組件的icon圖標(biāo)的相關(guān)資料,本文介紹的是小白都會的前端技能,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2024-01-01