- 在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>
- 在使用此键盘事件对
input
框支持比较好,其他的元素多少会有点问题,或者直接无效,究其原因是其他的元素没有获取焦点或者没有键盘事件。 - 比较简单的解决方式如下 , 如果是没有键盘事件使用css把input框绝对定位到需要绑定键盘事件的元素之上并且把input框设置为透明,把该input框与原来要绑定键盘事件的元素进行绑定,达到效果;
vue
中<div class="container"> <input class="item opa" @keyup="deleteDiv"> <div class="item">div内容</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"); } }
vue 中定义键盘回车事件
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.