How can I detect if the button below is currently pressed down (being held down)?
<input type="button" value="Hold it down" id="aButton">
To clarify, I don't mean to detect if the button is clicked, but being held down in the active state.
I tried to use the mousedown event but it doesn't work if the user operates the button with the keyboard, tabbing to the button and holding the space bar down.
It work fine with jquery mousedown (onmousedown in native js ) mouseup (onmouseup in native js ) events , bellow the working sample :
$(document).ready(function(){
$("#btn").on("mousedown",function(){
console.log("btn click down using mouse");
})
var firstKeydown = true;
$("#btn").on("keydown",function(e){
if(e.which == 32){ // check if clicked button is sapcebar "code =32"
if(firstKeydown) { // to prevent multiple firing
console.log("btn click down using keyboard");
firstKeydown = false;
}
}
})
$("#btn").on("mouseup",function(){
console.log("btn click up using mouse");
})
$("#btn").on("keyup",function(e){
if(e.which == 32) { // check if clicked button is sapcebar "code =32"
console.log("btn click up using keyboard");
firstKeydown =true;
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Button</button>
Related
I have written one Small script. By clicking the tab, it will show the console value "hotspot div is focused" then if I hit enter in the same div it will show the console value "Enter key is pressed". First time it's working totally fine. But the problem is if I click the tab second time and hit enter, in the console "Enter key is pressed" this value showing twice. And that value increased every time. How can I prevent it and make it triggered once each time without page load?
Code is attached below
$( ".main-nav__menu-hotspot" ).focus(function() {
console.log("hotspot div is focused");
$(".main-nav__menu-hotspot").keypress(function (e) {
if (e.keyCode == 13) {
console.log("Enter key is pressed");
$('.main-nav-overlay').toggleClass('main-nav-overlay--menu-open');
$('.main-nav--gct').toggleClass('main-nav--menu-open');
}
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-nav__menu-hotspot" tabindex="0">menu</div>
<div class="main-nav-overlay">
overlay
</div>
<div class = "main-nav--gct">
nav
</div>
What you're doing is creating a new keypress event listener, every time the $( ".main-nav__menu-hotspot" ).focus() event listener is triggered.
e.g. if you hover over the menu 4 times (or whatever triggers the focus event), it'll create 4 keypress event listeners. So when you do the keypress, it'll execute 4 times.
Move the keypress event listener creation out of the other one:
$( ".main-nav__menu-hotspot" ).focus(function() {
console.log("hotspot div is focused");
});
$(".main-nav__menu-hotspot").keypress(function (e) {
if (e.keyCode == 13) {
console.log("Enter key is pressed");
$('.main-nav-overlay').toggleClass('main-nav-overlay--menu-open');
$('.main-nav--gct').toggleClass('main-nav--menu-open');
}
e.preventDefault();
});
I have my code below. It's doing what I want. What I want to also do is run this function when a user use their keyboard to tab to the .add-row button and then presses enter. How do I make that run?
$('body').on('click', '.add-row', function(e) {
$( this ).html('Hide').removeClass('add-row').addClass('hide-row');
$( this ).parent().parent().next().show();
});
My understanding is you want the button to have focus and the user to press enter to fire the event, yeah? If so, then using the :focus pseudo class selector on the .add-row should work with the keypress event
$("body").on("keypress", ".add-row:focus", function(e) {
var ENTER_KEY_CODE = 13;
if (e.keyCode === ENTER_KEY_CODE)
{
alert("Enter key pressed");
// perform hide row and other operations here
}
});
I have a and div element
link
<div tabindex="0">div</div>
And click event handlers
$("a").on("click",function(){
alert(" a click")
});
$("div").on("click",function(){
alert("div click")
});
Using keyboard tab I can navigate to a link ,press Enter and see alert,but I can't do this for div.
Is it possible initiate click event for div as same as for a tag,without using any other events(keypress)?
JSfiddle
You can create a custom event like this:
$("div").on("click enter",function(){
alert("div click")
})
.on('keypress', function(e) {
if(e.which === 13) {
$(this).trigger( 'enter' );
}
});
DEMO
I know this is an old post but i thought i might add something.
PeterKA has a nice solution but i would improve it just a bit.
Instead of triggering a new custom event like enter just trigger the click event. This way you don't need to modify existing code and add the new event to every listener you have.
Each element that listens to click will be triggered.
$('.btn').on("click",function(){
alert("div click")
})
// at a centrelized spot in your app
$('.btn').on('keypress', function(e) {
if(e.which === 13) {
$(this).trigger('click');
}
});
$(document).ready(function(){
$('#firstDiv').focus(); // just focusing the first div
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstDiv" class="btn" tabindex="0">div</div>
<div class="btn" tabindex="0">div</div>
<div class="btn" tabindex="0">div</div>
I have a button and when it have clicked I show some input field.
The input field tracks keyup events itself.
When I click the button using my keyboard (focus it then hit return) the input field receives an unexpected keyup event.
Demo: http://jsfiddle.net/LpXGM/3/ (just hit return and look at the messages on the page)
But if I add a timeout everything works as expected. Demo: http://jsfiddle.net/8BRmK/1/ (no keyup event when hitting return on the button)
Why does this strange thing happen? And how can I fix it?
The code with the handlers:
$button.on("click", function(){
showModal();
});
$emailField.on("keyup", function(event) {
// process the event
});
var showModal = function() {
$modal.show();
$emailField.focus();
}
Possible solution without timeOut: http://jsfiddle.net/agudulin/3axBA/
$button.on("keypress", function(event){
if (event.keyCode == 13) {
return false;
}
});
$button.on("keyup", function(event){
if (event.keyCode == 13) {
showModal();
$status.append($("<span>enter has been pressed</span></br>"));
}
});
Try $button.on("keyup mouseup", function(){
or $emailField.on("keypress", function(event) {
try
$(document).ready(function(){
$(document).on("click",".btn",function(e){
$status.append($("<span>btn click</span></br>"));
});
$(document).on("keyup",".email",function(e){
$status.append($("<span>keyup " + event.keyCode + "</span></br>"));
});
});
yes its happens because one you click the keyboard than the button click event fire first and than as per your logic your input field take focus and your keyup event is fire. but when you give Timeout so click event is fire first but because of timeout your logic is delayed and than your your keyup event done our work so the focus in not in your input that why it not enter any word in your input.
I have a jQueryUI button on a form (not a modal dialog). I want it to be fired when the user hits the Enter key. How can I do this? Here is my code:
HTML:
Login
JS:
$(document).ready(function ()
{
$("#loginButtonInner").button(getButtonOptions("ui-icon-unlocked", true));
$("#loginButtonInner").button("option", "disabled", true);
$("#loginButtonInner").unbind("click");
}
....
if (userNameValid && passwordValid)
{
$("#loginButtonInner").button("option", "disabled", false);
$("#loginButtonInner").unbind("click").bind("click", function () { authenticateUser(); return false; });
}
else
{
$("#loginButtonInner").button("option", "disabled", true);
$("#loginButtonInner").unbind("click");
}
Currently, I have to tab to reach the button via the keyboard or click via the mouse.
I searched for solutions online, but they all point to a modal dialog form button .
Thanks!
Add a key listener to your form elements and watch for the Enter key, then trigger the click from your button:
$(yourform).find('*').keypress(function(e) {
if ( e.which == 13 ) { // 13 is the code for Enter key
e.preventDefault();
$(yourbutton).click();
}
});
You should be able to use the jQuery.focus() function.
For example:
$("#loginButtonInner").focus();
Will cause the element with ID of loginButtonInner to receive focus. So when you press enter, if that element is a button it will be pressed.
Update: I tried it with a jQueryUI button and it works fine.