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');
Related
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 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 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.
There are similar questions but they could not help me solve this.
When the dialog opens and I press enter, I want this to be equivalent to closing the dialog.
I have written the following but it does not work. Instead, at every ENTER, the focus stays on the element that triggers the opening of the dialog, giving rise to multiple instances.
Thanks
var $dialogError = $('<div id="dialogError"></div>').html(vGraph.getLastErrorMsg()).dialog({
autoOpen: false,
open: function() {
$("#dialogError").keydown(function(e) {
alert("enter");
if (e.keyCode == $.ui.keyCode.ENTER) {
$(this).dialog("close");
}
});
},
title: 'Error'
});
$dialogError.dialog('open');
Maybe set the focus to the dialogError element using $('#dialogError').focus(); after opening the dialog, that way the focus is no longer on the element that opened the dialog, and it will capture the enter key.
$(document).on('keypress', function(event) {
if (event.keyCode == $.ui.keyCode.ENTER) {
$('#dialogError').dialog('close');
}
});
This will work regardless of whether the dialog has focus or not which is probably what you want. This code will execute when the dialog is not open, but running $('#dialogError').dialog('close'); will have no adverse effects.
Example - http://jsfiddle.net/tj_vantoll/x32zC/1
try returning false from the keydown handler:
open: function() {
$("#dialogError").keydown(function(e) {
alert("enter");
if (e.keyCode == $.ui.keyCode.ENTER) {
$(this).dialog("close");
return false;
}
});
},
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.