Enter Key Pressed Event Handler

EventListener Enter Key

Are you trying to submit a form?

Listen to the submit event instead.

This will handle click and enter.

If you must use enter key...

document.querySelector('#txtSearch').addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      // code for enter
    }
});

Enter key pressed event handler

Either KeyDown or KeyUp.

TextBox tb = new TextBox();
tb.KeyDown += new KeyEventHandler(tb_KeyDown);

static void tb_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
    {
        //enter key is down
    }
}

to call onChange event after pressing Enter key

According to React Doc, you could listen to keyboard events, like onKeyPress or onKeyUp, not onChange.

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

Update: Use React.Component

Here is the code using React.Component which does the same thing

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

Here is the jsfiddle.

Update 2: Use a functional component

const Input = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('do validate')
    }
  }

  return <input type="text" onKeyDown={handleKeyDown} />
}

How do I use the Enter key as an event handler (javascript)?

You could make the button type submit, or you can use the onkeyup event handler and check for keycode 13.

Here's a list of key codes: Javascript Char codes/Key codes). You'll have to know how to get the keycode from the event.

edit: an example

HTML:

<input onkeyup="inputKeyUp(event)" ...>

Plain javascript:

function inputKeyUp(e) {
    e.which = e.which || e.keyCode;
    if(e.which == 13) {
        // submit
    }
}

How to capture Enter key press?

Form approach

As scoota269 says, you should use onSubmit instead, cause pressing enter on a textbox will most likey trigger a form submit (if inside a form)

<form action="#" onsubmit="handle">
    <input type="text" name="txt" />
</form>

<script>
    function handle(e){
        e.preventDefault(); // Otherwise the form will be submitted

        alert("FORM WAS SUBMITTED");
    }
</script>

Textbox approach

If you want to have an event on the input-field then you need to make sure your handle() will return false, otherwise the form will get submitted.

<form action="#">
    <input type="text" name="txt" onkeypress="handle(event)" />
</form>

<script>
    function handle(e){
        if(e.keyCode === 13){
            e.preventDefault(); // Ensure it is only this code that runs

            alert("Enter was pressed was presses");
        }
    }
</script>

Trigger a button click with JavaScript on the Enter key in a text box

In jQuery, the following would work:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

$("#pw").keyup(function(event) {    if (event.keyCode === 13) {        $("#myButton").click();    }});
$("#myButton").click(function() {  alert("Button code executed.");});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Username:<input id="username" type="text"><br>Password: <input id="pw" type="password"><br><button id="myButton">Submit</button>

Blazor, how can I trigger the enter key event to action a button function?

onkeypress is fired only for character keys. onkeydown will fire for all keys pressed. I found some explanation of differences between all key events here

Try it with onkeydown and it worked:

<input type="text" @onkeydown="@Enter" />

In the event handler you will have to do this (notice that I check for both Enter and NumpadEnter keys):

public void Enter(KeyboardEventArgs e)
{
    if (e.Code == "Enter" || e.Code == "NumpadEnter")
    {
         // ...
    }
}

Trigger an event on click or when enter key is pressed [JavaScript]

You're not calling OnKeyEnterPressDoThis inside the keypress event listener, you're declaring the function. Move the function out of the event listener and call it when the event is called.

Also use e.keyCode instead of e.keyCode(); since keyCode it's not a function.

In some browsers e.keyCode is undefined, you have to use e.which in those cases.

So something like this should add a little of browser support:

var key = e.which || e.keyCode || 0;

Code:

function OnKeyEnterPressDoThis() {
    Input_Tarea();
    showTheNmbrOfListElmts();
    orderAlphaFukkabossList();
}

Btn_List.addEventListener("keypress", function(e) {

    var key = e.which || e.keyCode || 0;

    if (key === 13) {
        OnKeyEnterPressDoThis();
    }

});

// Agregar Tarea
Btn_List.addEventListener("click", OnKeyEnterPressDoThis);

a custom event for pressing the 'Enter key' in C#

Sure, you can just add, say, an EnterPressed event and fire it when you detect that the Enter key was pressed:

public partial class UserControl1 : UserControl {
    public event EventHandler EnterPressed;

    public UserControl1() {
        InitializeComponent();
        textBox1.KeyDown += textBox1_KeyDown;
    }

    protected void OnEnterPressed(EventArgs e) {
        var handler = this.EnterPressed;
        if (handler != null) handler(this, e);
    }

    void textBox1_KeyDown(object sender, KeyEventArgs e) {
        if (e.KeyCode == Keys.Enter) {
            OnEnterPressed(EventArgs.Empty);
            e.Handled = e.SuppressKeyPress = true;
        }
    }
}

---

Related Topics