How to Execute a Function on Pressing the Enter Key in an <Input> Field

How can I execute a function on pressing the enter key in an input field?

You can use this:

var wage = document.getElementById("wage");
wage.addEventListener("keydown", function (e) {
if (e.code === "Enter") { //checks whether the pressed key is "Enter"
validate(e);
}
});

function validate(e) {
var text = e.target.value;
//validation of the input...
}

Live demo here

How to call function on text input enter key pressed?

I would suspect you are getting an error in your validate() function. Try putting the alert after you call the validate() and see if you still receive the alert message. Like this...

$("#myText").keypress(function(event) {
if (event.which == 13) {
validate();
alert("You pressed enter");
}
});

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>

How to invoke a function on pressing the Enter key

If you want to add a new checkbox when the ENTER key is pressed, just change this:

let itemList = document.querySelectorAll("input[type=text]");
for (var i = 0; i < itemList.length; i++) {
addEventListener("keypress", function(e) {
if (e.key === "Enter") {
createNewItem();
console.log("New item created!");
}
})
}

To this:

document.addEventListener("keypress", function(e) {
if (e.key === "Enter" && (document.activeElement.tagName.toLowerCase() !== 'button')) {
createNewItem();
console.log("New item created!");
}
});

I forked your current jsFiddle and used the above code instead here: https://jsfiddle.net/AndrewL64/3fcgpxrL/30/

Credits to @Moosecouture who mentioned the use of document.activeElement to prevent unwanted invokes when an element is in focus during the keypress.

Calling a function when enter key is pressed with JavaScript

I'm willing to place a bet that the add-item element isn't in focus when you press enter. Instead, try changing the trigger to be the input field.

document.getElementById('new-item-text').addEventListener('keypress', function (e) {
if (e.keyCode == 13) {
addItem();
}
}, false);

How to call a function by pressing enter key in html using javascript?

The page will be replaced when the keypress event's default action goes through, so you need to add a listener to keypress events and call .preventDefault() on them as well when enter is pressed. (keyup events don't need preventDefault() for anything, AFAIK)

There's another problem, though; it looks like your script tag is in the head and doesn't wait for the document to be populated to run. Give it the defer attribute.

<script type="text/javascript" src="js/main.js" defer>

When a script tag has the defer attribute, it will wait for the document to be loaded before running.

var input = document.getElementById("search");
function showTrue() { document.getElementById("output").innerHTML = "It's true";}
function showFalse() { document.getElementById("output").innerHTML = "It's false";}// Get the input field

input.addEventListener("keypress", function(event) { if (event.keyCode === 13) { event.preventDefault(); }});// Execute a function when the user releases a key on the keyboardinput.addEventListener("keyup", function(event) { // Number 13 is the "Enter" key on the keyboard if (event.keyCode === 13) { // Trigger the button element with a click showFalse(); }});
<body style="background-color:black">  <div class="s006">    <form>      <fieldset>        <legend>What are you looking for?</legend>        <div class="inner-form">          <div class="input-field">            <button id="trueButton" onclick="showTrue()" class="btn-search" type="button">                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">                  <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>                </svg>              </button>            <input id="search" type="text" placeholder="Test you news here" value="" />          </div>        </div>
</fieldset> <p style="font-size: 36px; color: #fff; font-weight: 800; text-align: center; margin-bottom: 59px;" id="output"></p> </form> </div></body>

How to press the enter-key inside an input field with pure JavaScript or jQuery?

Use Keyup Event Listener. keycode for enter is 13.

For More Example, Please visit https://www.w3schools.com/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" />

How to call a function when enter key pressed?

Everybody suggests using jQuery and it's not needed at all in this case.
The same for more javascript, it's not needed and will probably make your code less readable.

The only thing you need to do is an an if statement in the html tag.

Just add the following if statement:

if (window.event.keyCode == 13) getMailList($('#email').val())

13 is the keycode for enter.

<input type="email" name="email" id="email" style="width:100%;" 
onkeypress="if (window.event.keyCode == 13) getMailList($('#email').val())" required>

Call a function when the enter button is pressed via Javascript

If you want to use obtrusive Javascript:

<input type="text" value="DIGITE O LOCAL" onclick="this.select()" 
onKeyDown="if(event.keyCode==13) alert(5);" size="20" id="endereco">

Handling this unobtrusively:

document.getElementById('endereco').onkeydown = function(event) {
if (event.keyCode == 13) {
alert('5');
}
}

Your best choice is to use the latter approach. It will aid in maintainability in the long run.

Reference: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript



Related Topics



Leave a reply



Submit