Javascript: change event getting fired when input field loses focus - javascript

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.
});

Related

Focus disables mouse click

I have some text-areas in a web page and I have used the below code snippet to focus on textarea which was required as textarea was not allowing to enter text in itself. But using below code not allowing user to click and add text any where in between already entered text. User is only able to go through the arrow keys but not using the mouse. Do we have any hack to fix it?
$('textarea').on('click',
function () {
$(this).focus();
});
Could you only call focus if the textarea is empty?

jquery not triggering change when textbox changes occurs from copy-paste with mouseclick

I'm listening to changes in a textbox using keyup and change as the events. This works when you type with the keyboard or do a copy paste also with the keyboard (Ctrl-V).
The problem is that when a user right-clicks on the textbox and pastes text, the change is not detected until the user clicks somewhere else on the page, and so things look broken. Here's the jsFiddle and here's the code:
function Start() {
$('#test').on({
change: OutputTxt,
keyup: OutputTxt
})
}
function OutputTxt() {
$('#output').text($('#test').val());
}
$(Start);
How do I change this so that a change that occurs with copy-paste is detected as soon as the pasting is done. Note: I tried adding a click event but it doesn't help.
Try on input:
$('#test').on({
input: OutputTxt,
})

Conflicts of blur and submit/click events

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.

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
});

Firefox Extension preference window onsynctopreference Button

I have a XUL button that once clicked listens for a keystroke. When a keystroke is captured, it sets the label of the button to the keyCode of the keystroke. I want to save this value to the preferences. I am using onsynctopreference to tell the button to use the value of its label as the preference. However, onsynctopreference seems to fire onmouseup. The problem is, the user is expected to click the button, then enter a key. Once the key is entered, then I want onsynctopreference to fire.
How would you suggest I handle this? Is there anyway to manually call onsynctopreference?
Use the onkeypress handler to call onsynctopreference manually:
function foo()
{
/* ... */
onsynctopreference();
}
document.onkeypress = foo;

Categories