Here is my fiddle: DEMO
There is a button called "fb-send", which has to get clicked on key press on "enter" in the input field. How to achieve this?
<input @keyup.enter="" placeholder="Reply here" class="fb-comment-input" />
<i class="material-icons fb-button-right fb-send">⇨</i>
Any help would be much appreciated. Thank you.
You can also call method for fb_send directly on input field:
@keyup.enter="enterClicked()"
<Input v-model="value1" size="large" placeholder="large size" @keyup.enter.native="search"></Input>
14 June, 2020
Enter and KeyPress will work both.
Grab the Input fields in a form like this:
<form v-on:keyup.enter="login">
<input type="email" v-model="email">
<input type="password" v-model="password">
<button type="button" @click="login">Login</button>
</form>
Javascript Part:
<script>
export default {
data() {
return {
email: null,
password: null
}
},
methods: {
login() {
console.log("Login is working........");
}
}
}
</script>
Here is my answer fiddle: ANSWER-DEMO
I solved this using $refs.
new Vue({
el:'#app',
methods:{
enterClicked(){
alert("Enter clicked")
},
trigger () {
this.$refs.sendReply.click()
}
}
})
You need to call enterClick method inside input field like below:
<div id="app">
<input @keyup.enter="enterClicked" placeholder="Reply here" class="fb-comment-input" />
<i class="fb-send" @click="enterClicked">⇨</i>
</div>
<script>
new Vue({
el:'#app',
methods:{
enterClicked(){
alert("Enter clicked")
}
}
});
</script>
Please use @keyup.enter.native=function(), this will work .
native function is a function provided by your browser/server/JavaScript
$("form").keypress(function (e) {
debugger;
if(e.charCode == 13){
e.stopImmediatePropagation();
e.preventDefault();
}
});
