Treat enter keydown as pressing the "Next" button across multiple modals - javascript

I have four modals that are each a step for filling out and submitting form. each modal has a "Next" button that closes the current open modal and opens the next in the process. I am trying to get the enter key to act as pressing the "next" buttons, and the "submit" button on the last step/modal.
This is my current code for a single modal(looks the same for all modals)
$("#user-lookup-modal").on('shown.bs.modal', function () {
$('#add_assistant_submit').prop('disabled', true);
$(document).keypress(function (e) {
if (e.keycode == 13 || e.which == 13) {
$('#add_assistant_next').trigger("click");
return true;
}
}) ;
});
However, this causes weird behavior where pressing enter in one modal counts as pressing enter in all previous modals as well. I tested that out with console output.
EDIT:
I tried this, which seemed to work but is it a poor solution since it will listen for keypresses at all times?
$(document).keypress(function (e) {
if ( e.keycode == 13 || e.which == 13) {
if ($("#myModal").data('bs.modal') || {isShown: false}).isShown) {
//trigger button
}
//... repeat for other modals
}
});
return false;

Related

Use a preventdefault to get out of the loop after pressing Enter key

This is a complete revision of my initial question, all unnecessary resources and references were deleted
I am tying the same event listener to 2 different elements: a button and Enter key, and it looks like the following:
var funcelement = function(){
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click');
}
})
What I am trying to do is to prevent propagation of the enter key press if focus is on the submit button(#buttonID) by using preventDefault().
So I tried various combinations to make it work. The following is the latest result on my attempts
$('#inputID').keyup(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})
After I enter a text into an input box and press Enter key, a confirmation window with yes/cancel buttons pops up with focus on yes button. Once I press Enter again, another window confirming that changes were made pops up with Ok button focused on it. Once I press Enter again, everything I need is being made.
However, there is one problem: after the last step is done, I am going back to the if (!hasfocus) line.
How do I prevent that from happening? Once the stuff I need is done - I don't want to go into that line again.
You can pass a parameter to into the function and stop the propagation there like so:
var funcelement = function(event, wasTriggeredByEnterKey){
if (wasTriggeredByEnterKey && $('#buttonID').is(':focus')) {
event.stopPropagation;
}
//function code
};
$('#buttonID').click(funcelement);
$('#inputID').keyup(function () {
if (event.which == 13) {
$('#buttonID').trigger('click', [true]);
}
}
)
UPDATE
In order to answer your revised issue, you should use the "keydown" event rather than "keyup" when working with alerts. This is because alerts close with the "keydown" event but then you are still triggering the "keyup" event when you release the enter key. Simply change the one word like this:
$('#inputID').keydown(function () {
var hasfocus = $('#buttonID').is(':focus') || false;
if (event.which == 13) {
if (!hasfocus) {
event.preventDefault();
$('#buttonID').trigger('click');
//hasfocus = true;
}
else {
//event.preventDefault();
//$('#buttonID').trigger('click');
}
}
})

Firefox OS: start searching on enter key press

I am new in Firefox OS. I have a search box.
After pressing the submit button it shows results perfectly. But I want to add keyboardevent like press enter button it will show result.
Try this:
$("#SearchText").keydown(function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
//stop CR & do submit here instead
document.forms["myform"].submit();
return false;
}
});
It intercepts every key press in the search text field and checks for Return.

Is it possible to capture the scroll wheel click

I've just written some code, that when the user clicks on a link (I'm using jQuery's .click()), they get a modal popup telling them they're being redirected to a different site. This all works fine with a normal left click, however, clicking the link using the middle mouse button to open it in a different tab loads the page straight away rather than showing the modal. Ideally I'd like to show them the modal too, then after the timer finishes open it in a new tab for them.
Is it possible to capture this click too?
Try this, It will help
$("yourtag").on('mousedown', function(e) {
if( (e.which == 1) ) {
alert("left button");
}if( (e.which == 3) ) {
alert("right button");
}else if( (e.which == 2) ) {
alert("middle button");
}
e.preventDefault();
}).on('contextmenu', function(e){
e.preventDefault();
});
Yes it is possible through simple click event listener:
$("#element").bind('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
});
just for your information, e.which == 1 will fire for left click and 3 for right click.
Try this code,
$(document).on("mousedown", "a", function(e) {
if( e.which == 2 ) {
e.preventDefault();
//your code here
}
});
Refer this answer : Live demo
$("#foo").on('click', function (e) {
if (e.which == 2) {
e.preventDefault();
alert("middle button");
}
});
Ref

How to prevent form submission using the keyboard (esp. the space key)

I have a web application where on one specific screen I have to make sure the user clicked the button using the mouse as opposed to just pressing enter or space.
I have written this code:
$('button').keydown(function (e) {
if (e.which === 10 || e.which === 13 || e.which === 32) {
return false;
}
});
However, this only works for enter. The form can still be submitted by pressing space on a button. I am just wondering what caused this inconsistency and how to get around it?
Edit:
Example fiddle: http://jsfiddle.net/billccn/3JmtY/1/. Check the second check box and pressing enter while the focus is on the button will have no effect. If I further disable the input and expand the keydown trapping to the whole form, then enter cannot be used to submit the form.
Edit 2:
I do have a backup plan which is replacing the button with a link or even a plain div and use the click event to submit the form programmatically. However, extra work is required to make it look like a button so I'd rather use a button is possible.
Just found out: handling space (32) on keyup will prevent the click event.
Updated fiddle: http://jsfiddle.net/3JmtY/2/
Missed the Point of your Question. After some googleing if found the following trick:
Bind the keypress event to your from and listen to it's keycode. If the keycode is 13
(enter), prevent all default actions (event.preventDefaul()) and prevent further event bubbeling ( return false; ).
Her is a fiddler code example:
HTML:
<form id="target" action="destination.html">
<input type="text" value="Hello there" />
<input type="submit" value="Go" />
</form>
<div id="other">Trigger the handler</div>
JavaScript:
$('#target').keypress(function (event) {
var code = event.keyCode || event.which;
if (code == 13) {
event.preventDefault();
return false;
}
});
$('#target').submit(function (event, data2) {
debugger;
alert('test');
return false;
});
Fiddler: http://jsfiddle.net/ggTDs/
Note that the form is not submited when enter is clicked!
Use below code. 13 for Enter key and 32 for Spacebar.
$("#form_id").on('keydown keyup keypress', function( e ) {
if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
e.preventDefault();
return false;
}
});

why is my button losing focus?

This is what I want to happen.. When a user hits 'enter' a 'SearchForItems()' should trigger. What is happening is another control, with 'other button', on the page gets focus returned to it anytime any other element is tabbed out of or after onkeyup.
I am having to force focus on the 'Search button' on page load, but after that any time enter is pressed the 'other button' is triggered. The 'other button' does not have a tab index assigned and is the pages default button.
I'm not sure if I've done a good job explaining this. Basically I want to know why focus is being shifted and how I can force the 'Search button' to trigger anytime enter is pressed.
this is one entry on my page where I'm trying to force the 'Search button' to trigger:
<td><input type="text" onkeydown="CheckForEnterKey(event)" id="AcceptedDate1" maxlength="7" style="width:121px;" value="<%=DateTime.Now.AddMonths(-3).ToString("MM/yyyy")%>"/> </td>
this is part of my jquery file where i'm also
$('#AcceptedDate1').keypress(function(e) { if (e.keyCode == 13 || e.which == 13) $('#SearchAcceptedLotsButton').click(); });
CheckForEnterKey Function
function CheckForEnterKey(e)
{
var keycode;
if(e.which)
{
keycode = e.which;
}
else
{
keycode = e.keyCode;
}
if(keycode == 13)
{
$('#SearchAcceptedLotsButton').click();//tried SearchForItems() also
}
}
Edit:
I just added this to my page and it appears to work, I added this to the main div thats holding everything together. What I need to do now is figure out where the enter was pressed so the enter is canceled everytime it is pressed within the main portion of my page. Any ideas, there are a lot of elements on my page?
function checkKey(e)
{
if(e.keyCode == 13 || e.which == 13)
{
e.returnValue = false;
e.cancel = true;
}
}
I am not sure why you are having problems. But I can offer you my onKeyDown code for pressing enter:
if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { #DO JS HERE # }}
So I use it like this:
<input type="text" onKeyDown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { alert('You pressed enter!'); }}">
In the above code whenever enter is pressed the id="SearchAcceptedLotsButton" can be triggered click as follows :
if(keycode == 13)
{
$('#SearchAcceptedLotsButton').trigger('click');
}
this is how I resolved the issue:
I added this function..
function checkKey(e)
{
if(e.keyCode == 13 || e.which == 13)
{
e.returnValue = false;
e.cancel = true;
SearchAcceptedLots();
}
}
At the top most div containing everything on the page I added this:
<div id="ItemPanel" onkeydown="checkKey(event)">
this catches every enter that is pressed within the form, canceling the default buttons behavior and calling the desired function.

Categories

Resources