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
What Is the Most Efficient Way to Reverse an Array in JavaScript
How to Auto-Slide the Window Out from Behind Keyboard When Textinput Has Focus
Add Commas to a Number in Jquery
How to Create an Auto-Complete Combobox
React Jsx: Selecting "Selected" on Selected <Select> Option
How to Call a Dynamically-Named Method in JavaScript
Angular 2 Karma Test 'Component-Name' Is Not a Known Element
Get Width Height of Remote Image from Url
Why Are Es6 Classes Not Hoisted
Jquery Returning "Parsererror" for Ajax Request
Domnodeinserted Equivalent in Ie
How Do Cors and Access-Control-Allow-Headers Work
Load "Vanilla" JavaScript Libraries into Node.Js
Why Is There a 'Null' Value in JavaScript
What's "This" in JavaScript Onclick
Dynamic Require in Requirejs, Getting "Module Name Has Not Been Loaded Yet for Context" Error