My Chrome Extension has a useful toolbar...and of course a popup.
When a user clicks into some websites, the invokes my Extension (by clicking on the toolbar or just click the Extension icon) focus leaves the element on the parent/main page...which can sometimes be undesirable.
Is there a way to stop a Chrome Extension from taking focus? So the cursor remains blinking and/or the main page element stays in focus and a blur event is not triggered?
I took a different approach...since I know which element the user was focused on before clicking my popup or toolbar, I simply put the focus back on that element after my code ran...works beautifully...
Related
Open in iOS:
https://jsfiddle.net/rLLvd18q/31/
I have a page hosting an iFrame with an input element. The outer page has a button that removes the iFrame from the DOM. In Safari/Chrome in iOS 9.3.2 (I tested on iPhone 6s) clicking that button while the input is focused, causes the iFrame to be removed, but the cursor stays blinking on screen. Furthermore, the keyboard stays open (clicking keys does nothing). After dismissing the keyboard, clicking anywhere else in the screen causes the keyboard to pop back again.
I have already tried posting a message upon clicking the button from the hosting page to the iFrame upon clicking the button and doing
document.activeElement.blur()
inside the iFrame. Didn't help... I'm running out of ideas...
I've been trying to solve this issue in my project, and I noticed the iframe is NOT the active element. A possible workaround could be focus programmatically the iframe and then blur it.
This works fine for me. I checked the iOS forums and it seems that's an iOS9 webview bug and could be present in iOS10.
On click of an input field, a projected popup window opens (have used z-index).
Now when i press TAB, i want the focus to automatically move from background screen to the popped up window.
Is it possible to achieve this flow of TAB navigation through built in properties or styling ?
NOTE 1: I tried setting focus to the outer div of the popup programatically.
So that the focus is moved from background to popup.
But it fails in IE11 and IE10 because, the cursor remains in one element and the focus remains in another element when navigation passes through an empty field. I DONOT WANT HELP FROM COMMUNITY MEMBERS TO DEBUG THIS CODE.
NOTE 2: I won't be able to set the tabindex for the popup window elements statically. Because in that case, the TAB moves to those elements even when the popup window is not visible.
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.
click/tap event not working correctly
click or tap seems to fire on the new element that appears even though originally handled by other element which caused the element to appear in the first place... wtf?
I have a mobile web app where a button brings up a bootstrap modal with a unordered list in it. The items in the list make a selection and close the modal. In standard chrome and chrome's android emulator there is no issue. But on my tablets, when you click the button, if the modal covers the button, the modal is brought up then a selection is made on the modal exactly where you clicked on the button. Its like a duplicate click/tap is being processed at the same location. I have tried tap, click, and touchstart events for both the button and the lineitem. What can I do to prevent this issue?
I'm working on a website where I'm using Javascript (via JQuery) to add pop-up boxes containing extra information for items in a list. I'm using JQuery's mouseeneter and mouseleave events to make the popups appear and disappear which of course all works fine in desktop browsers.
In Mobile Safari the popup appears when I click an item (which is what I expect and what I want to happen) and I have added an ontouchstart which triggers the mouseleave JQuery event thus hiding any visible pop-up when the user does anything else. This works fine too except that when a user taps an item the pop-up of which they've just looked at and cancelled (either by scrolling or by doing anything else that triggers the ontouchstart event), rather than it showing the pop-up again it activates the link attached to that item.
If a user were to tap another item instead of tapping the same item again then that new item's pop-up would show and then if they were to tap the first item again then that item's pop-up would show. Again, this is both expected and what I want to happen.
It would seem that once an item with a hover event has been tapped and Mobile Safari as been forced to make that event happen, that item is then flagged as having had its hover event triggered and so the next tap doesn't have to pretend to be a hover, it can be a normal click. Tapping another item with a hover event seems to "reset" the flag set for the previous item.
I'd like to be able to 'reset' this flag for myself so that, rather than how things work currently where clicking an item shows the pop-up and the next click on that item, even if the pop-up has been closed, will activate the link, instead when I close the pop-up with my ontouchstart, and so to my mind the item is no longer being "hovered over", a second click on that same item should show the pop-up again and then only by clicking on the item whilst the pop-up is visible should the link activate.
The secret would seem to be in getting Mobile Safari to exit its "pseudo-hover" mode when I use ontouchstart to trigger mouseleave but I have been unable to find anything useful anywhere on exactly what's going on when Mobile Safari pretends to hover over anything and whether any of this is accessible via Javascript events.
I know I could write a version of my pop-up code to work specifically for Mobile Safari but it seems much more efficient to me to get the browser to do most of the hard work of mimicking hover events. If only I could get this final little niggle sorted out.
I'm guessing the hover state is tied into which element has focus rather than as a flag. One tap gives focus, second tap activates the link.
Try closing the pop-up by giving another element focus, and see if that works out any better.
$('body').focus();
tl;dr but try this:
# :hover fix
# e.g.: body:not(.stoppedhovering) .styled:hover
hoverFix = ->
window.clearTimeout hoverFix.delay if hoverFix.delay?
$('body').removeClass 'stoppedhovering'
delayed = -> $('body').addClass 'stoppedhovering'
hoverFix.delay = _.delay delayed, 600
$('*').live 'touchstart', hoverFix