On key press of Enter, click a button in vuejs

问题

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">&#x21E8;</i>

Any help would be much appreciated. Thank you.

回答1:

You can also call method for fb_send directly on input field:

@keyup.enter="enterClicked()"

回答2:

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()
    }
  }
})

回答3:

<Input v-model="value1" size="large" placeholder="large size" @keyup.enter.native="search"></Input>

回答4:

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>

回答5:

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">&#x21E8;</i>
</div>

<script>
    new Vue({
        el:'#app',
        methods:{
          enterClicked(){
             alert("Enter clicked")
          }
        }
    });
</script>

回答6:

Please use @keyup.enter.native=function(), this will work .

native function is a function provided by your browser/server/JavaScript

回答7:

        $("form").keypress(function (e) {
            debugger;
            if(e.charCode == 13){
                e.stopImmediatePropagation();
                e.preventDefault();
            }
        });

来源：https://stackoverflow.com/questions/46639549/on-key-press-of-enter-click-a-button-in-vuejs

标签

Vue.js

vuejs2