How do I force blurring, but without calling onBlur event in JavaScript/jQuery?
I'll try to describe you what I need it for:
when onBlur is called, I call a PHP script via jQuery and validating input. If there's something wrong, it returns a message and then I display it back in jQuery script.
if a blurred field isn't filled, script should focus user back to that field.
And the problem is that if you press TAB to change field, and your first field is not filled, script will focus you back, but then is called onBlur from second field that is also not filled, and then it causes an infinite loop.
So, i want to blur a field and focus to another without calling onBlur event.
It's not an answer as spec'ed in your question, but what I'd suggest you do (in a somewhat UX sort of perspective) is to scrap the auto-refocus on invalid input, and instead mark the invalid field (may I suggest red, for example?). Now, you can go and deal with the (arguably) simpler problem of preventing a form submit on invalid data, instead of the problem of preventing a natural browser behavior type of an event.
Additionally, I'd dare to say that auto-refocusing is irritating for the user. Imagine tabbing to the second field, start typing, then suddenly yoink! You get dragged to the first field.
Why not just use on "change" and "keyup" instead of on blur?
I agree with Richard above, there's nothing more annoying than losing focus in the middle of typing, but if you do need to do this (Due to a customer requirement etc) - in the code that auto-focuses the field, disable the onBlur function temporarily until you've focused the field, then re-enable it.
Related
I'm using the jQuery UI modal dialog, and populating it with some form fields. Because of this bug: http://bugs.jqueryui.com/ticket/4731, the first input gains focus when the dialog opens. To get around that, I'm trying to blur the affected input when the dialog is opened.
The problem is that there exists other functionality which is called for this input on a .blur(), and I don't want to fire that functionality for this.
So, I'm trying to use .focusout()and .trigger('focusout') to achieve the same effect, but with no results.
Doing either of these:
$('#input-id').focusout();
$('#input-id').trigger('focusout');
does not actually cause the input to lose focus, where using .blur() is successful. Am I missing something, or is there another way to accomplish what I need?
If you fancy a quick javascript hack you could use:
$(':focus').blur();
My suggestion would be to set the focus to some other element in the dialog when it is opened instead of setting textbox to blur. This should overcome your problem.
Hope this Helps!!
Focusout does not cause the element to lose focus. Instead focusout is triggered when an element loses focus. Check out http://api.jquery.com/focusout/
I used this as a workaround:
$('body').focus();
I used this without needing to execute javascript in the selenium driver:
field.send_keys :tab
In the form that I am developing, I need to implement a screen rule which is - Clear button is greyed out until atleast one input field is not null. For this, I have added a js function which checks all input fields and gets called during "onmousemove" event. I have added this to body tag.
I does work, but I suspect if this is the best way it can be done.
Are there better ways to implement this?
No, it's not a good idea to bind to onmousemove, especially on body — that means every time someone moves their mouse, your function is called. What you really want is to bind to blur (navigates away from an input field) or change (the value of a field is changed – be careful with IE). If you really want to get granular, you can check one of the keyboard events — keyup, keydown, keypress. And you should bind these events to the input fields themselves.
How do I make for this onFocus to occur just 1 time (not as now that is blocking the windows with dialogs)?
<html>
<form name="myForm">
<input type="button"
value="Big Button"
name="myButton"
onFocus="alert('Focus event occured')">
</form>
</html>
update:
sorry, when I say "a single time" I mean a single time each time it receive focus. Currently with a single focus it shows infinite dialogs.
This is problematic. When the input field gets focus the focus event is fired, you handle that event by putting up an alert box which takes focus away (a "blur" event) from the input field. When the alert is dismissed the input field gets focus again, firing the focus even another time, and leading to an endless loop of gain/lose/gain focus. You are getting the focus even more than once because you are changing the focus.
You do not want to do something in a focus handler that changes the focus like this, unless it's something along the lines of "when this control gets focus, send focus to that other control instead".
If you do something that doesn't cause a focus change (which an alert does), such as adding text to a div when you get focus, you'll see that the event will only occur once.
If you describe what you're actually trying to accomplish you may get better advice. I assume the alert is just a test.
So firefox has a nifty mechanism which will try to autocomplete values in fields when a page is reloaded or the back button is used. Which is great and all except when you have something like a drop-down which when set to a value modifies the page using ajax.
What winds up happening is that the browser reloads the page, the drop down is pre-filled with the remembered value, and then no change event is fired when the dom is ready. And therefore the change handlers attached don't fire and thus the page does not update.
Is there a good way to "fix" this behavior so that it works for the user as expected:
a) We do want the browser to auto-complete because that is a good user experience.
b) Still want that onchange event firing.
The only thing I can think of doing at the moment is to add an on-ready event to the document which has javascript pre-populated with initial values in the form, when the document loads the javascript will check the pre-populated values and if not matching what is in the input will trigger the change handlers.
Anyone have a better solution? Is there a lib that does this already?
(Using Rails 2.3.5 + jQuery)
Unfortunately there appears to be no way of actually disabling firefox from auto-filling fields when reloading a page or using the back-forward button. Fortunately the values are already there during $(document).ready() event so as long as everything in those inputs can have the .change even initially fired on them, it don't matter where the values came from and it just works.
I think you can add autocomplete="off" to prevent the browser from prefilling those fields.
You can also have a function that runs onload and basically checks to see if the value of the field matches what was specified in the value="" parameter.
I have a form with blur-events bound to the required fields. Then there is a "Cancel" Button which simply calls an URL (button is an image with click-event).
When leaving one of the required fields a warning is written to the page saying that field xy is required. -> this causes a layout shift, meaning all the fields and the buttons are moved down a little bit because of the text inserted above.
The tricky thing is this: when the focus is in an empty but required field and you click the cancel button, the required-warning is written to the screen but the click-event on the cancel button doesn't fire.
I think this is due to the layout shift. The mouse cursor doesn't hover over the button anymore, because the button scrolled down.
Has anyone a good idea how i could solve this?
You could attempt to display the warning before the change/blur events by polling a setInterval function, so that by the time you get to the ‘Cancel’ button the reflow has already occurred.
Or, you could catch onmousedown on the button instead of onclick as it will occur before blur. (Makes the button behave not-quite-as-expected though.)
But I'd probably simply try to make the warning not cause a reflow when it appears if possible, by leaving a blank space otherwise.