Login using enter key

Question

I have login form in my app. Currrently I have a Login button to login. When this login button is clicked, I send the username and password values to the backend api which in turn generates a token and allow the user to move to next screen if authenticated. I want the same functionality when I press enter key. I have looked to many sources but I need a secure way. How can I do it. This is my form component

render(){
    return (
        <div className="LoginPage">
            <div className="login-page">
                <div className="form">
                    <form className="login-form">
                        <input id="username" type="username" placeholder="username"/>
                        <input id="password" type="password" placeholder="password"/>
                        <p className="message">Not registered? <a href="#">Request Username and Password</a></p>
                    </form>
                    <button onClick={this.handleLoginButtonClick.bind(this)}>login</button>
                </div>
            </div>
        </div>
    );
}

you need to bind key press event to form or its input elements see this answer http://stackoverflow.com/questions/8981637/submit-form-with-enter-key-without-submit-button — Vinod Louis, Feb 07 '17 at 08:28
How can I do it using just javascript? Also I if a user just enters username and not the password and hits enter key then password field should get focused asking him to enter the password. can you please suggest me something for all of this? — EdG, Feb 07 '17 at 08:31
yes use the event in above url ans and check for your input value if not has a value then focus on that element — Vinod Louis, Feb 07 '17 at 08:33
You can just add the `onSubmit` attribute to the form like this `
` and then change the button to the submit type. You will have to then use `preventDefault()` in the `handleLoginButtonClick` — Femi Oladeji, Feb 07 '17 at 09:09

Mayank Shukla · Accepted Answer · 2017-02-07T09:41:22.220

Use the onKeyDown event with input fields, and in this method check the keycode of the key pressed by the user, Key code of Enter key is 13, so whenever he pressed enter, call the same method that you are calling on button click, Write it like this:

render(){
    return (
        <div className="LoginPage">
            <div className="login-page">
                <div className="form">
                    <form className="login-form">
                        <input id="username" type="username" placeholder="username" onKeyDown={this.onKeyDown.bind(this)}/>
                        <input id="password" type="password" placeholder="password" onKeyDown={this.onKeyDown.bind(this)}/>
                        <p className="message">Not registered? <a href="#">Request Username and Password</a></p>
                    </form>
                    <button onClick={this.handleLoginButtonClick.bind(this)}>login</button>
                </div>
            </div>
        </div>
    );
}

onKeyDown(e){
   if(e.keyCode == 13){
     /*write the logic here*/
   }
}

You need to use ref to focus the field if user left them blank. Check jsfiddle for working example with focusing the field: https://jsfiddle.net/ygytaj6s/

How can I make a field focused if user hasn't anything in the field? — EdG, Feb 07 '17 at 08:58
check `jsfiddle` for complete working example, focusing part also, please mark the ans as correct it solved ur isssue :) — Mayank Shukla, Feb 07 '17 at 09:42
use `autoFocus` property to focus any field by default :) check this one: https://jsfiddle.net/d3gbjuew/ name field is autofocused. — Mayank Shukla, Feb 07 '17 at 09:49

Login using enter key

1 Answers1