對vue 鍵盤回車事件的實(shí)例講解
如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，則要加上native限制符，因?yàn)閑lement-ui把input進(jì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)這個(gè)鍵盤事件好像對input框支持比較好，其他的元素多少會有點(diǎn)問題，或者直接無效，究其原因是其他的元素沒有獲取焦點(diǎn)或者沒有鍵盤事件。
我現(xiàn)在的解決方式，
如果是沒有鍵盤事件使用css把input框絕對定位到需要綁定鍵盤事件的元素之上并且把input框設(shè)置為透明，把該input框與原來要綁定鍵盤事件的元素進(jìn)行綁定，達(dá)到效果；
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");
}
}
如果是沒有獲取焦點(diǎn)，則可以寫一個(gè)自定義指令自動獲取焦點(diǎn)，
自動獲取焦點(diǎn)自定義指令見我另一篇文章 點(diǎn)擊進(jìn)入
拓展知識：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)按下鍵盤的時(shí)候，執(zhí)行show方法，然后再去執(zhí)行相應(yīng)的業(yè)務(wù)。
兩個(gè)input的效果都是一樣的 如果安13 也就是按鍵 enter 才會執(zhí)行彈窗??！
@keyup.13 回車
@keyup.enter 回車
@keyup.left 左鍵
@keyup.right 右鍵
@keyup.up 上鍵
@keyup.down 下鍵
@keyup.delete 刪除鍵
以上這篇對vue 鍵盤回車事件的實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue之vue.$set()方法源碼案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
使用Vue+Django+Ant Design做一個(gè)留言評論模塊的示例代碼
這篇文章主要介紹了使用Vue+Django+Ant Design做一個(gè)留言評論模塊，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue背景圖片路徑問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章從javascript原型鏈來解釋為什么vue中data必須是一個(gè)函數(shù)，解釋一下這部分的原理內(nèi)容，感興趣的朋友跟隨小編一起看看吧2021-11-11
vue?使用mescroll.js框架實(shí)現(xiàn)下拉加載和上拉刷新功能
這篇文章主要介紹了vue?使用mescroll.js框架?實(shí)現(xiàn)下拉加載和上拉刷新功能,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
JS 函數(shù)的 call、apply 及 bind 超詳細(xì)方法
這篇文章主要描述JS 函數(shù)的 call、apply 及 bind 方法的超詳細(xì)解說，感興趣的朋友可以參考下文，希望能幫助到您2021-08-08
在vue項(xiàng)目中父子組件間的通訊很方便,但兄弟組件或多層嵌套組件間的通訊,就會比較麻煩,這時(shí)使用eventBus通訊,就可以很便捷的解決這個(gè)問題,這篇文章主要給大家介紹了關(guān)于Vue中事件總線(eventBus)使用的相關(guān)資料,需要的朋友可以參考下2022-03-03
Vue如何實(shí)現(xiàn)監(jiān)聽組件原生事件
這篇文章主要介紹了Vue如何實(shí)現(xiàn)監(jiān)聽組件原生事件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Vue3組件的開發(fā)，上一篇文章我們價(jià)紹了Vue3（三）網(wǎng)站首頁布局開發(fā)，今天繼續(xù)上篇內(nèi)容展開組件的開發(fā),需要的朋友可以參考一下2021-11-11
在Vite項(xiàng)目中配置路由時(shí),可能會遇到文件路徑錯(cuò)誤導(dǎo)致的加載失敗問題,常見的解決辦法包括安裝路徑處理插件、正確設(shè)置vite.config.js中的路徑別名以及重啟項(xiàng)目,通過正確配置,可以確保路由正確加載對應(yīng)的界面文件,避免路徑錯(cuò)誤導(dǎo)致的問題2024-10-10