If it is a native input, just use @. If element-ui is used, you need to add a native restriction character, because element-ui encapsulates the input, and the original event will not work. The code is as follows:
<input v-model="" placeholder="Nick name" @="submit"> <el-input v-model="" placeholder="Nick name" @="submit"></el-input>
Now I find that this keyboard event seems to support the input box better. Other elements may have some problems or are directly invalid. The reason is that other elements do not get focus or have no keyboard event.
My solution now,
If there is no keyboard event, use css to absolutely position the input box on the element that needs to be bound to the keyboard event and set the input box to transparent, bind the input box to the element that originally wanted to be bound to the keyboard event to achieve the effect;
<div class="container"> <input class="item opa" @keyup="deleteDiv"> <div class="item">divcontent</div> <span click="DeleteDiv">X</span> </div>
css：
{
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");
}
}
If you do not get the focus, you can write a custom command to automatically get the focus.
See another article for automatic focus custom commandClick to enter
Expand knowledge: Detailed explanation of vuejs 2.0 keyboard events
As shown below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src=""></script>
<script type="text/javascript">
= function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(ev){
if( == 13){
alert('You press Enter');
}
},
}
});
}
</script>
</head>
<body>
<div >
<input type="text" placeholder="Please enter" @keyup="show($event)">
<input type="text" placeholder="Please enter" @keyup.13="show($event)">
</div>
</body>
</html>
When pressing the keyboard, execute the show method and then execute the corresponding business.
The effects of both inputs are the same. If you install 13, that is, the button enter will execute pop-up window! !
@keyup.13 Enter
@Enter
@ left button
@ Right click
@ Up key
@ down key
@Delete key
The above example explanation of the vue keyboard return incident is all the content I share with you. I hope you can give you a reference and I hope you can support me more.