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
}
});
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 2 textboxes and 2 buttons. These buttons and textboxes linked each other (first textbox-first button/second textbox-second button) . If user write something in textbox1 and press enter, enter will be activate button1. If user focused textbox2 and press enter, enter will be activate button2. I tried something but it doesn't work.
document.getElementById('<%=txtYonSif.ClientID%>').addEventListener("keyup", function (evente) {
evente.preventDefault();
if (event.keyCode === 13) {
document.getElementById('<%=btnPanelYonetici.ClientID%>').click();
}
});
document.getElementById('<%=txtKulSif.ClientID%>').addEventListener("keyup", function (event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById('<%=btnPanelKullanici.ClientID%>').click();
}
});
If you are not using jQuery, you can use element.dispatchEvent().
If you can use jQuery, use trigger() function.
Using dispatchEvent in javascript
var event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
var myButton = document.getElementById('button_id');
myButton.dispatchEvent(event);
Using trigger in jQuery.
$("#button_id").trigger('click');
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>
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.
Suppose I press the Tab key, I would want that it performs another action besides the default event. I've selected a text box and I want it to add some spaces (Just wanting a textarea to act like a text editor). How to trigger this type of event?
So far, I only know how to prevent the default action:
$('#content').on('keydown', function(e) {
if(e.which == 9) {
e.preventDefault();
}});
But how do you fire another keyboard event?
There is no need to preform any action. Just change value manually: LIVE DEMO
$('#content').on('keydown', function(e) {
if(e.which == 9) {
var val = $(this).val();
val += ' ';
$(this).val(val);
e.preventDefault();
}});