vue 键盘回车事件
转载原博:https://blog.csdn.net/lx_1024/article/details/79086979如果是原生的input,使用 @keyup.enter就可以,若是使用了element-ui,则要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了,代码如下:<input v-model="form.name&quo
·
转载原博:https://blog.csdn.net/lx_1024/article/details/79086979
如果是原生的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框与原来要绑定键盘事件的元素进行绑定,达到效果;
如果是没有获取焦点,则可以写一个自定义指令自动获取焦点,自动获取焦点自定义指令见我另一篇文章:http://blog.csdn.net/lx_1024/article/details/78953416
test.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");
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)