Conflicts of blur and submit/click events - javascript

I have two items
item1 is textbox
item2 is submit button
Now item1 has blur event in jquery. In that blur event I have validation and based on that validation if it fails user will have confirmation message.
So if user press yes he can proceed futher
if user press no that textbox will be blank and need to enter detail again.
So now my issue is that if user enter detail in item1 and directly click on item2, button's submit event rejected and item1's blur event called. So first time is rejected and user have to press 2nd time on button(This is the issue).
So how to know in item1's blur event if user click on item2 than I can proceed further with triggering item2's click event.

Consider this code
var $item1 = $('#item1');
var $item2 = $('#item2');
$item1.on('blur', function (oEvent) {
if ($item2.is(oEvent.relatedTarget)) {
// your blur is caused by click on $item2 a.k.a submit button
} else {
// your blur is caused by smth else
}
});
It checks where your focus was moved and you can add some specific boolean flag to use later on in your submit handler or maybe change your validation somehow.
Please note that blur event is event of loosing focus, focus can go away not only because of clicks, but also because of tab-navigation for example.
UPDATE:
added a jsfiddle http://jsfiddle.net/DbjQc/
Try focusing the text input and then clicking somewhere else. After that try focusing the text input again and then click the submit button - you will see how behavior changes.

Related

Vue prevent blur event

I have an editable input component, which has an isEditable state.
By clicking outside the input field, I use #blur event.
By clicking on the enter key, I trigger another event.
Both methods use the same logic, and after the logic finishes, I set the isEditable to false. In this case, somehow the blur event is triggered. (I guess because the input field disappears (I guess because it uses v-if="isEditable").
Is there any way to prevent blur to be triggered by changing the state programatically?
If hiding the div activates the blur event, then you can just make the keypress Enter event hide the div, your logic will be executed only once in both cases.
Before :
#blur="myLogic"
#keyup.enter="myLogic"
After :
#blur="myLogic"
#keyup.enter="willActivateBlur"
// methods
willActivateBlur: function() {
this.isEditable = false
}
Edit : Wait, did you say "click on the enter key" ?... I got confused, are you clicking or pressing a key ?
If your problem is using #blur and #click at the same time, a lot of questions were asked about this already, such as this one.

Angular: "tab" keycode event not firing

I have a form field with a handler that I want to trigger after the user deliberately accepts the value with either return/enter or tabs to the next field. I can't use onBlur in this case, since it of course triggers if the user or system blur the field. I only want it on a keyup.
So I have this. I had the enter first, and it works great. But the keycode==9 does not trigger the handler. The focus merely moves to the next field.
ng-keyup="($event.keyCode == 13 ||
$event.keyCode == 9)
&& packages.submitNumber('add', packages.addTrackingNumber)"
Is there a way to have this fire on enter OR tab?
Tab button in html is tabulating to the next focusable element (buttons, inputs etc.). So when you keydown tab button keyup is happening on the next focusable.
To avoid this you can try to use ng-keydown.
See working example

Javascript: on blur getting the event's relatedTarget on mobile safari

So, I have a form with custom validation that is triggered on input blur event...
works fine
the form submit prevents the form to be submitted if there are validation errors on the page...
effectively what that means is if there is an erroneous message and it's focused.... if you click submit button, first the element's blur is triggered and the submit... but coz the element is
in practice I would have to click submit twice.... first time to re-validate the element and second to trigger submit again...(when all the elements are valid)
so on blur, I do
if ( event.relatedTarget && event.relatedTarget.type === "submit" ) {
...
}
and check if the instigator (of element's blur event) is the submit button...if yes, I skip the validation and trigger submit directly.... (that handles validation itself)..
It works perfectly, even in OSX...
the problem is mobile safari... that simply doesn't populate the event.relatedTarget... (is always null on submit click.... it's populated only on some other element's focus)....
how can I get the instigator on iOS?
I had the same problem where I had to hit the submit button on my form twice (on iOS.) Surprisingly I found that this solution worked:
how to prevent blur running
It was not clear at first but using this solution the mousedown event stops my normal blur event from happening but if you click the "Done" on the iOS keyboard it will let the blur event run because there was no mousedown event.

Javascript: change event getting fired when input field loses focus

I have input fields on my page and I detect when the user types something to enable the Save button. I also have enabled a shortcut Ctrl + S to let the user save. Whenenever data is saved, the Save button is disabled.
However I have a dilemma. If the user changes the text in an input field, does a Ctrl + S and then moves to another input field using the mouse, the "change" event gets fired for the input field that the user changed and this in turn causes the Save button to get enabled again. The Save button should not be enabled because no changes have taken place after doing a Ctrl + S. What it appears is that the change event is fired not just with changes in text but also when the focus is moved to another field.
$("input.SaveMe").live('keypress change', function ()
{
// Code goes here to enable Save button
});
How can I prevent the change event from taking place after saving. I thought of using some kind of flag but I can't figure out how.
You can ignore the event when that particular input is not in focus, in the following manner.
$("input.SaveMe").live('keypress change', function() {
if (!$(document.activeElement).id == 'id_of_input') return; //if (!$(document.activeElement).hasClass('SaveMe')) return;
// Code goes here to enable Save button
});
Removing the detection for "change" takes care of the problem but this now prevents users from pasting text into a field and detecting the paste as a change. To fix that use:
$(document).bind('paste', function (e)
{
// Add code to update flag to indicate data changes and enable the Save button.
});

Run javascript/jquery after text change but before submit

I have an input element on a form along with a submit button.
I want to run the change event on the input element all whenever a change occurs. The problem is if end user changes text and clicks submit button the code in the change event doesn't run.
Immediately after user clicks the submit button, the form submits (like the change is not getting time to run, the same occurs with blur or focus out).
My controls can be placed on any form, and I do not control the click event of the button.
Help please
If you're wanting to catch whenever input in a textbox is changed try this in the document.ready
$("input[type='text']").change( function() {
$("#SubmitButton").attr('disabled', 'disabled');
// check input ($(this).val()) for validity here
// after text is updated..etc, enable the button
$("#SubmitButton").removeAttr('disabled');
});
may be you want use event.preventDefault
Expanding on #Aleks G's comment, the best thing for you to do is trigger your change handling on more than just the change event. Beyond keyup, I've found you also need to be careful to handle pasting with the mouse (doesn't trigger the keyup or change event):
yourInput.bind('change keyup paste', function() {
// Your code
});

Categories