I have this button that leads to a method in javascript that filters the information of a table:
<button type="button" id="search" title="Buscar" onclick="fn_cliente.filtraInformacion();"></button>
There are several fields for which you can filter the information, I want that when pressing "enter" on any input, it executes the same method as when clicking on the button
Use the following to bind the enter event to your search fields.
document.querySelectorAll('.searchfield').forEach(function(input) {
input.addEventListener('keypress', function(e) {
if (e.keyCode === 13) filtraInformacion();
});
});
Look at this code snippet
function filtraInformacion() {
console.log('filtraInformacion has been called!');
}
document.querySelectorAll('.searchfield').forEach(function(input) {
input.addEventListener('keypress', function(e) {
if (e.keyCode === 13) filtraInformacion();
});
});
<button type="button" id="search" title="Buscar" onclick="filtraInformacion();">Click me</button>
<br>
<input id='name' class='searchfield' placeholder='Press Enter!'>
<br>
<input id='lastname' class='searchfield' placeholder='Press Enter!'><br>
<input id='gender' class='searchfield' placeholder='Press Enter!'>
See? when the enter key is pressed, the function filtraInformacion is called.
This works. You can adapt it to whatever element you want.
<input type="text" id="account-location-country-input" class="mdc-text-field__input" required onkeyup = "if (event.keyCode == 13)document.getElementById('edit-account-button').click()">
Related
I want to trigger a button click when the Enter button is pressed in my page. I know how to do it if it's in a form. Like this
<form>
<input id="myInput" placeholder="Some text.." value="">
<input type="submit" id="myBtn" value="Submit">
</form>
<script>
var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
</script>
But how to trigger the button even when the Enter is pressed irrespective of where the focus is in the input element or not. just pressing the Enter button will trigger the button in the page. How can I do that?
You just need to add your event listener to the document instead of the input
document.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
You can use document
When use input.addEventListener then it will listen event from input only and when use document.addEventListener then it will listen from the entire page
var input = document.getElementById("myInput");
document.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
<form>
<input id="myInput" placeholder="Some text.." value="">
<input type="submit" id="myBtn" value="Submit">
</form>
you can bind the keyup event on window or document
window.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
console.log("oops!")
}
});
Instead of binding the event listener to that input element, bind the listener globally like this
document.addEventListener("keyup", your_function_here);
I have a text field and a button. Either when the button is clicked or enter is hit, a function should be executed.
My approach works is intended. However, is it possible to combine those 2 functions (click and keypress), so that I only have 1?
$("button").click(function() {
getInput();
});
$("#name").keypress(function(e) {
if (e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
So I need to just append those events.
Here is a fiddle.
You can listen for multiple events using .on('listOfEvents')
Than you just need some additional rules to check when you need to run function.
$("button, #name").on('click keypress', function(e) {
if ($(e.currentTarget).attr('id') == 'submit' || e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<button id="submit">
OK
</button>
function getInput(){
return $(".result").text($("input").val());
}
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<input type="text" />
<button>ok</button>
</form>
<div class="result"></div>
you can wrap your input and button in a form and listen for a submit event on that form. Forms can be submitted by pressing enter in an input inside of them or clicking a button that is enclosed
HTML
<form action="">
<input type="text" />
<button>ok</button>
</form>
Javascript
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
#eltonkamami answer is one idea and my idea is to provide same class for both input field and button like this :
(But, this will trigger whenever input field is changed)
$(".same").bind("click keypress", function() {
getInput();
});
function getInput() {
console.log($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
OK
</button>
Hope it helps :)
We can differentiate a click and keypress by e.key or e.type parameters
Try this,
var getInput = function(e) {
if((e.which & e.which==13) || !e.key)
//e.key is a parameter for keypress event and not for click
alert($("#name").val())
}
$("button").click(getInput);
$("#name").keypress(getInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
Click
</button>
$("button,#name").on("click keypress",function(e) {
//alert($(e.currentTarget).html());
if (e.which == 13) {
getInput();
}else if(event.type == 'click'){
getInput();
}
});
function getInput() {
alert($("#name").val())
}
I have this code:
<input type="text" name="name" onkeydown="test(event)" />
function test(event){
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
It's not working as expected this way, but if I add an alert to the code like this:
function test(event){
alert("Why?!");
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
My button is this into gsp file:
<button type="submit" class="btn btn-primary" name="myButton" value="Submit">
Button
</button>
My form is this:
<g:form name="searchForm" controller="party" action="searchObject" class="form-horizontal margin-bottom-20">
</g:form>
Then everything works...
Someone can tell me what's going on and how can I solve this problem?
HTML:
<input type="text" name="name" onkeydown="test(event)" />
<button id="myButton">Button</button>
Javascript:
var test = function (event) {
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
$(function () {
$("#myButton").click(function () {
alert("This button was clicked using the enter key");
});
});
If i understood correctly, you are trying to invoke a click event with a key press (in this case, the enter key). Fiddle here: http://jsfiddle.net/jsu2jsx8
When I use jquery to clear content of input:
$('input#myinput').val('');
everything is fine except for the user cannot use ctrl+z to obtain the previous text. is there any way to preserve ctrl+z ?
is there any way behaves as if it is cleared by user?
Suppose it gets cleared on clicking a button:
$(document).ready(function() {
var input = $('input#myinput').val();
$('#button').click(function() {
$('input#myinput').val('');
});
$(document).keydown(function(e) {
if (e.which === 90 && e.ctrlKey) {
$('input#myinput').val( input );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myinput" value="text"/>
<input type="button" id="button" value="Button" />
How can we make a form in a page doesn't submit on pressing Enter — rather. it does the same work as pressing a particular button or icon or image?
Here are the contents of my form:
<input type="text" id="txt" /><input type="button" value="search"
onclick="searchresult()" />
The problem is that if I press Enter, the form submits and text field clears itself but the function searchresult() doesn't show its effect. When only pressing the button, it works well.
HTML
<input type="text" id="txt"/>
<input type="button" value="search"/>
jQuery
$('input[type=text]').on('keyup', function(e) {
if(e.which == 13) { // 13 is keycode for enter
e.preventDefault();
}
})
You can also bind to submit() like following
$('form').submit(function(e) { // instead of only `form`,
// use with `id` or `class` combination
if(e.which == 13) {
e.preventDefault();
}
});
Remainder
Don't forget to place you code within
$(document).ready(function() {
// your code
});
in short
$(function() {
// your code
});
Alternatively, instead of disabling the enter key, you might be able to bind to the onsubmit event to perform any processing prior to submitting the form. From the MDN documentation:
The submit event is raised when the user clicks a submit button in a form ().
Try:
$('form').submit(function(event){
if(!$(':focus',this).is(':button'))
event.preventDefault();
});
This attaches to the form itself. If it was submitted any way other that clicking the submit button it halts the submission process. For better performance narrow down the 'form' selector.
Try this:
form
<form id="myForm">
<input type="text" id="txt" />
<input type="submit" value="search" />
</form>
js
<script>
$(document).ready(function(){
$("#myForm").submit(function(e){
e.preventDefault();
searchresult();
});
});
</script>