i want to simulate an enter-press inside a text-input-field that i can identify using an id. First i will find my textfield by document.getElementById. This works pretty fine. Next, i want to click inside the textfield so set the cursor inside it. And last i want to press enter. I have no idea how i can do this. And I couldn't find any solution here.

My code looks a follow:

let plzField = document.getElementById("filter"); //find the text-field (works)
plzField.click(); // works
plzField.enter(); // does not work

Please help!

i want to simulate an enter-press inside a text-input-field that i can identify using an id. First i will find my textfield by document.getElementById. This works pretty fine. Next, i want to click inside the textfield so set the cursor inside it. And last i want to press enter. I have no idea how i can do this. And I couldn't find any solution here.

My code looks a follow:

let plzField = document.getElementById("filter"); //find the text-field (works)
plzField.click(); // works
plzField.enter(); // does not work

Please help!

• javascript
• html
• jquery

• 1 what is the result of pressing the actual enter key? – Bravo Commented Feb 14, 2022 at 11:36
• Yeah, if pressing an enter key calls a function then just call that function(). If it submits a form then you can call the .submit() method on the form. Or you can find the submit button and .click() it. I don't know what else it might be. – criticalsession Commented Feb 14, 2022 at 11:37
• That particular behavior triggers a submit event (if that input is a child of a form). .submit() method yields the same result. – zer00ne Commented Feb 14, 2022 at 11:41
• You might want tot have a look at developer.mozilla/en-US/docs/Web/Events/… and developer.mozilla/en-US/docs/Web/API/EventTarget/… – secan Commented Feb 14, 2022 at 11:53

3 Answers 3

Use Keyup Event Listener. keycode for enter is 13.

For More Example, Please visit https://www.w3schools./howto/tryit.asp?filename=tryhow_js_trigger_button_enter

let plzField = document.getElementById("filter");

plzField.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    console.log(event.target.value);
  }
});

<input type="text" id="filter" />

As per your question, it seems, that you want to detect on enter event occurred or not. In pure Javascript, there is no such onenter event, but with eventCode or eventName you can check that.

You need to apply filter as you applied in you code and then you need to check for keyPress() event and within this event you need to check `event.code || event.key' like below

var textInput = document.getElementById('foo');
function enter() {
    var keyboardEvent = new KeyboardEvent('keydown', {
        code: 'Enter',
        key: 'Enter',
        charKode: 13,
        keyCode: 13,
        view: window
    });

    textInput.dispatchEvent(keyboardEvent);
}

textInput.addEventListener('keydown', function (e) {
    console.log(e);
});
enter()

<input type="text" id="foo" />

$("#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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br> Password:&nbsp;
<input id="pw" type="password"><br>
<button id="myButton">Submit</button>