How do I make the onFocus occur a single time? - javascript

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.

Related

How to trace the mouse focus event in javascript or AngularJS

I have a weird bug in my web application. Say, I have two input box on my page: Input-A and Input-B.
When I focus on Input-A, and when there is a somewhat event triggered, the focus will jump to Input-B. However, I didn't write any code to change the focus. The event also has nothing to do with focus changing, at least I didn't find it.
Therefore, I'm wondering if there is anyway to find out who trigger the focus to change. Or, can I trace the focus event?
I use JavaScript and AngularJS and Firebase.
Thanks.

Javascript event when user removes focus on textbox

I want to know the right event when the user remove focus on a text box. Whether if the user presses tab or clicked to another field. I've seen some solutions like onchange or blur. But it doesn't satisfy all scenarios when the user remove focus. I want to use pure javascript or jquery. Thanks!
jquery focusout() is the best suited in this case
go thought this link
jQuery .focusOut() documentation
I find .focusOut() useful when I'm more specifically concerned with losing focus from a defined input or input group, since it supports event bubbling.
see the demo in http://api.jquery.com/focusout/ it works when user uses tab to focusout or clicks anothoer field
FYI: The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
you can use blur() event.
The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

How to force blur without calling onBlur event

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.

To disable Clear button while all input fields are null

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.

click-event doesn't fire if blur changes layout

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.

Categories