I have a div with several buttons in a form. When one of the buttons is clicked, this div is hidden and a new div is displayed. In my case, I am also having the button click trigger an ajax call for some data to populate the newly displayed div. The div that loads is a game that captures key events to allow the player to play.
In Firefox on Windows, I notice that all key events are being targeted at the button that was clicked on the first div, rather than at the body element. This means that the enter key re-clicks that button (restarting the game). If I disable the buttons when I switch divs, key events do not get triggered at all (making it unplayable).
What would a good strategy be to deal with this situation?
Not sure if this is an answer to my own question or a workaround, but it looks like I can call:
document.activeElement.blur()
I've added this to my button's onclick function and this seems to solve the problem.
Related
I'm trying to dismiss the keyboard via JS in response to a button press, but I'm not having any luck.
Setup:
I have a textarea with accept and cancel buttons tied to it.
Upon clicking the cancel button, my view object will call textAreaElement.blur().
It will then remove the accept and cancel buttons.
Expected:
Field loses focus (visually and otherwise).
Keyboard is dismissed.
Actual:
Field appears to lose focus (visually, no cursor is displayed), and programmatically.
Keyboard is still presented.
I've already tried the usual Google but they all seem to think that calling blur on the focused element should be sufficient. One user even suggested calling $('input').blur() to ensure that all fields were blurred, but that didn't seem to make a difference.
... and I just figured out why this was happening.
I mentioned that I was removing the Accept and Cancel buttons for this field. Specifically the following was taking place:
Call textAreaElement.blur().
Animate the buttons disappearing.
Upon completion of the animation, buttons.remove().
When the Cancel button received the click, it gained focus (the keyboard remained active). When the Cancel button was subsequently removed in the animation completion callback, focus was applied to the previous focusable element, which is the textarea.
So I had the effect of doing:
textarea.blur() # Already doesn't have focus.
buttons.remove() # Removes buttons, applies their focus back to the textarea.
The solution was to instead:
Animate the buttons disappearing.
Wait for completion of the animation, buttons.remove().
Call textAreaElement.blur().
I am building a webpage and i have set a body backround-image. Is there a way to change the url of the image when the user presses the mouse key, and change it back when the mouse key is released? Basically the change lasts the same amount of time as the click itself.
Also, how do i make sure this change works for a click anywhere on the page? Will adding an event listener to the body element suffice? Thanks in advance.
The :active pseudo-class applies while an element is being activated
by the user. For example, between the times the user presses the mouse
button and releases it. On systems with more than one mouse button,
:active applies only to the primary or primary activation button
(typically the "left" mouse button), and any aliases thereof.
css3-selectors spec
Pure CSS example:
body:active {
background-image: [IMAGE];
}
Example jsfiddle
I am working on a nav menu which contains some external url links, There are focus styles associated with the navigation menu , like the menu item gets a background when it is focused. If an item, that is an anchor which points to an external link, is clicked, it opens a new tab and displays the page that is represented by that external link. My problem is that, even though a new tab is opened when the user comes back to the original tab, he can still see the background behind the clicked nav menu item. There are no :active styles associated with that menuitem.
I created this example in js fiddle to enumerate the problem:
https://jsfiddle.net/bc5yu44v/2/
<body>
<a id="selectMe" href="www.google.com" target="_blank" onblur="changeText()">clcik here</a>
</body>
Here you can see that even after a new tab is opened by clicking the anchor tag , the anchor tag does not loose its :focus style, but you can see that text was changed , indicating that onblur event was fired.
can any body point me on how to remove :hover style?, is this possible by only using pseudo selector or it can only be achieved by writing js and toggling the classes?. I have a restriction of not using jquery too. I have tested it in chrome and firefox only.
This happens because navigating away from a page causes the page to lose focus, which takes the focus away from any element within the page that may have been in focus at the time, which is why the element's blur event is fired.
Once you navigate back to the page (or in this case the tab/window containing the page), focus is returned to the element that was in focus at the time, and if you had an onfocus event handler on the element, that would fire as well. The element does not lose its focus permanently between page or window focus/blur events. Similar behavior can be observed simply by switching windows, switching tabs, or opening and closing Start if you're on Windows.
You can force the element to lose its own focus by explicitly calling .blur() at the end of the event handler, but I would not do this with an onblur event handler but an onclick event handler instead, because otherwise the element would defocus itself when you switch tabs, etc.
I wanted to know which event is triggered when I go on a page and press TAB which results in going through the links.
I want to whenever someone uses the tab to go through the page <a> tags it will force the hover event on the link, or will do any other code for instance, the element is visibility:hidden but when the user is using the tab, the browser is actually going through the hidden <a> tag and therefore cause it to be visibility:visible.
To stop the browser from "tabbing" to your hidden links, you can try setting a negative tab index on the links: How to ignore HTML element from tabindex?
The "event" that occurs when a link is tabbed over is the "focus" event, styled via the pseudo-class :focus.
I have implemented the Swipe for Action Android pattern in my mobile web application (PhoneGap) using JavaScript & CSS animations/transitions.
However, there's one thing that's still eluding me.
I wish, that once the action menu is displayed fully and the user clicks anywhere outside of the action menu (labelled 3 in the figure), the menu should retract and the original item displayed (labelled 1 in the figure).
In a desktop application, one could "capture focus" and perform the transition back to (1) in lostfocus.
What is the JS equivalent of lostfocus event. I see an onfocus and onblur event, but from what I read it's really meant for things that need focus; like input, textarea, etc.
How else could I catch that event I'm interested in, other than putting some code in the touchend of every other element in the page and forcing the retraction of open actions explicitly?
I think you gave the answer yourself. focus and blur are the events to be used for this and they are not exclusively meant for input elements, as you can see here [1].
I'm even trigger the focus event manually in a layer use case: A layer opens and I want to capture the keypress of ESC to close the layer. For this I need to set the focus on the layer as my event handler would not fire otherwise.
To capture the click outside you just need to register for pointerUp or click events on an element that spans the whole screen (it must really cover the whole screen like the body element). Because of the event bubbling the handler will fire as long as nothing else captured and cancelled it.
[1] https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-blur