Menu
I would like to press the Enter Key and send a message. I try this:
But there is an error.
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
And I want to manage my function:
handleSendMessage = e => {}
I already try OnKeyPressed but I can't call my functions there. Thank you.
I prefer a solution without jquery
609
Using the onKeypress event The onKeyPress event is fired when a user presses the key on a keyboard, so that by using this we can trigger the button click by pressing a Enter key. The keyCode for the Enter key is 13.
To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery. keyup(): This event occurs when a keyboard key is released. The method either triggers the keyup event, or to run a function when a keyup event occurs.
If you're trying to create a keyboard event, you can make use of KeyboradEvent constructor. An enter key event can be dispatched like: const event = new KeyboardEvent('keypress', { key: 'enter', }); console. log(event) // KeyboardEvent {isTrusted: false, key: "enter", code: "", location: 0, ctrlKey: false, …}
Let’s create a simple <LoginForm /> function component in React. Instead of clicking the Submit button to call the handleSubmit () event handler, we can use the onKeyPress event of the input field to simulate the button onClick event. Now, define a new event handler handleKeyPress, which contains the logic to submit the form on Enter key press
Trigger a button click on keyboard "enter" with JavaScript. Trigger a Button Click on Enter Press the "Enter" key inside the input field to trigger the button:
Using the onKeypress event The onKeyPress event is fired when a user presses the key on a keyboard, so that by using this we can trigger the button click by pressing a Enter key. The keyCode for the Enter key is 13.
Let’s create a simple <LoginForm /> function component in React. Instead of clicking the Submit button to call the handleSubmit () event handler, we can use the onKeyPress event of the input field to simulate the button onClick event.
You would add a keyPress event on the input text input and then detect for an enter key press using e.which ===13
onKeyPress = (e) => {
if(e.which === 13) {
this.handleSendMessage();
}
}
render() {
return (
<div style={styles}>
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} onKeyPress={this.onKeyPress} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
</div>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
