@keyup.enter 仅在选项卡设置为登录按钮时有效

Question

The only time my login button works is when I a direct the tab button after inputting email and password,

I want it to work anytime I press enter and I am on the Login page.

this is a vueJS application

Html template

<template>
        <div class="login-page" id="login-page">
            <div class="form" id="form">
                <form class="login-form" id="login-form">
                <div class="head-login">
                <img class="teamfu-image" src="../assets/teamfu-v.png"/><h2 class="login">Login</h2>
                </div>
                <hr class="beneathBorder" color="white">
                <div>
                    <p class="text">Email:<input v-model="input.email" class="input" type="text" placeholder='e.g. johndeer@gmail.com'/></p>
                    <p class="text">Password:<input v-model="input.password" class="input" type="password" placeholder=" " /></p>
                </div>
                <button type="button" @click="login" @keyup.enter="login" > Login</button>
                <p class="message">Not a part of the team? <router-link class="reg" :to="'/register'">Register</router-link></p>
                </form>
            </div>
        </div> 
</template>

Script

<script>
import { checkUser } from "../db/storage";

export default {
    name : 'login-page',
    data() {
        return{
            input: {
                email: '',
                password: ''
            }
        }
    },
    methods : {
        login() {
            if(this.input.email != "" && this.input.password != "") {

                if(checkUser(this.input.email,  this.input.password) ) {

                    this.$emit("authenticated", true);
                    this.$router.replace('/dashboard');

                } else {

                alert("The username and / or password is incorrect")
                console.log("The username and / or password is incorrect");
            }
        } else {
            
            alert("A username and password must be present")
            console.log("A username and password must be present");
        }
        }
    }
}
</script>

Answer 1

If you want a page-level keyup handler, you will need to apply it as high on your tree as you can:

<div class="login-page" @keyup.enter="login" id="login-page">

Answer 2

In this case, it would be better to use the form's submit event to invoke login() instead of using click / keyup handlers on the button. The <form> automatically emits the submit event when the user clicks the form's submit button, or when the user hits ENTER while the form is focused.

First, make it a submit- button , and remove the existing click / keyup handler:

<!-- ❌
<button type="button" @click="login" @keyup.enter="login">Login</button>
-->
<button type="submit">Login</button>

Then add a submit -handler to the form:

<form @submit.prevent="login">

demo

Answer 3

I deleted this:

❌
<button type="button" @click="login" @keyup.enter="login" > Login</button>

and used this instead and it worked

<input type="submit" value="login" @keyup.enter="login()">

thank for your responses, I appreciate it