Is it possible to prevent iFrame element to get focus or if not, at least to return focus instantly to parent window once such iFrame gets focus? Please advise with code example.
It depends upon what you're really trying to accomplish and which focus methods you are trying to prevent. There's no magic setting you can set that prevents focus going to an iframe.
You can put a transparent element over the top of the iframe and have it capture all clicks so nothing in the iframe is clickable. You can likely just position this with CSS and wouldn't necessarily need javascript unless the iframe size is dynamic or not known in advance. This won't prevent javascript code from setting focus to the iframe, but will prevent mouse clicks from moving the focus to the iframe.
You can regularly check (javascript polling) where focus is and if it's not in your own document, then put it back in your document. This is kind of a hack.
Here's a demo of the first option: http://bit.ly/10jzdlp
If the problem that you're encountering is due to script in the iframe's document focusing one of its element, then one solution may be to use the iframe's sandbox attribute to prevent the iframe's document from running script (that is, setting the attribute to a value that does not contain the flag 'allow-scripts'). Whether that's acceptable will depend on whether it will break other things, of course.
Related
I am building a modal plugin and I would like to be able to set focus to the address bar.
I'd like to be able to do this because I need to be able to restrict tabbing to objects inside of the modal window, but keyboard users and accessibility users should be able to tab out of the modal window to the address bar when they have reached the final element (so that they are not stuck inside the modal). I'm aware that I can do this by setting all of the tabbable elements outside of the modal to have a tabindex of -1, but I'd like to avoid that solution if possible.
I'm aware that it may not be possible to directly set focus to the address bar due to security restrictions. Is there, however, a way to either do this, or defocus the page so that the next element is the address bar?
Having a modal element does not remove the other elements from the visual buffer. A screenreader may read automatically any other element after your modal. So removing the tabindex of elements which might be announced is indeed not a solution.
You may try to remove the focus from any other element using some code like $(".outside_modal").onfocus() {$("#modal-first-link").focus()} but you will have incoherence between your visual focus which will read link targets and the action provided by the keyboard focus.
The only viable solution is to set the modal element in the last position of your DOM.
I'm using the MDL tab component. After a tab is clicked and it displays the content for that tab, I'd like to set the cursor focus in a certain text input within that tab's content.
My initial approach was just to handle the click event of the tab element and then set focus accordingly. The problem I'm having is that calling .focus() on the text input element isn't working because it tries to set focus before the text element is actually visible, which no browser seems to like doing for you. If I set focus inside a setTimeout() delay it works, but that doesn't feel like a very clean way to go about it.
Is there any kind of event that can be handled for when a tab is clicked and has finished displaying it's contents? I've also looked at using mutation observers to detect when the text input element is visible but browser support for those is fairly limited still.
No there is no such option. I think you have to use setTimeout or setInterval
You can look into the source. Perhaps write your own MaterialTabs constructor and register it.
Material-Design-Lite source, MaterialTab
I think there are also some libs that can do this like jQuery. You can also see
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
This works only in modern browser but has a legacy implementation.
I've added this line :
window.dispatchEvent(new Event("tabSelected"));
to the material.js file, at the end of the selectTab() function. This way, the event is fired right after the tab content is shown.
I have a HTML-Form with a lot of Inputs. In the middle is a Frame for WYSIWYG-Editor (Xinha).
You can jump from one input to the next. So you can start at the first input and go with the Tab-Key to the last one. But it don't jump into the Frame and out. How can I change it? How can I give the Frame a tabstop? Tab-Index don't help.
Thank you
Burner
If your WYSIWYG-Editor isn´t able to do this, you´ll need to add event listeners to both sites. Key event listeners at each form element in the form site and one for tab in the frame site. You will also need an custom event in the main page, which you can trigger from inside frame. This event then should take focus from the frame to the next form element. Also your key listener should take manually the focus to the next field by preventing the default action.
As far as I know, TinyMCE uses per default an (i)frame for the editor content. Maybe you should also look at TinyMCE for a simplier solution.
Are you sure, You want to use Frame for WYSIWYG editor?
Try CK Editor, Tab works fine.
There is no cross-browser way for this with an inner frame. You can hook on the keydown events in both the parent and the child form but it's a dirty and unpaved road of doing this. A better approach would be to look for a better editor that manages without iframe.
If your editor doesn't actually NEED the iframe (they just recommend to put it into one) maybe you could try $.load() -ing it into a div.
Using jQuery, one can easily find out whether a particular element is visible using
$(element).is(':visible')
While having some limitations (doesn't cover css visibility hidden or the actual visibility in the viewport, i.e. whether it's covered by other elements or scrolled away), I find it being useful for my scenario. The catch is, it only works within one iframe.
If the element has any parent within its document with display:none;, it returns false. If the whole document is included in an iframe which has display:none, it returns true. Is it possible to somehow detect this in another way ?
Hmm, seems like you have to call top (parent) document within an iframe, then search for specific iframe and check if it's visible.
You'll probably have to have same domain/subdomain for this to work, but anyway:
Let's assume you know iframe id/class (you have to).
if ($(top).find('#iframeID').is(':visible')) {
// iframe is visible
} else {
// iframe is NOT visible
}
Can't guarantee correct work.
Seems that the window's frameElement property works in all browsers and delivers the current iframe where the window is contained (if cross-domain restriction doesn't apply, which was my case).
not possible afaik. an iframe is basically a different site and as such guarded against xss. simply don't use iframes but server-side includes.
I have some questions about focus in general (adhering to WC3 format, screw IE). I'm having problems with unintended actions occurring on a widget i am building (using the Dojo Toolkit), and i believe a better general understanding of focus will allow me to solve my problem myself, so here goes:
First of all, which common HTML element are and AREN'T focusable? I've been trying to throw focus around and it works sometimes, and doesnt work other times...
What is the 'highest' level focusable on a page? For instance, can i focus the window? The <body> tag? Specific to dojo, can you focus an entire widget? If the template is widgeted can you focus just highest level of the template (usually a <div>)?
Can focus be 'removed'? Can i remove focus from all elements/objects on the page until the next object is focused? Can i prevent a element from being focusable (like a button)?
What are all the methods through which i can affect focus? Besides calling the focus() method on elements, can focus be set through HTML attributes or in a CSS?
Thanks in advance for what i hope to be some great answers!
Disabled controls can't receive focus according to the HTML4.01 spec
Firefocus, an extension that works over Firebug, could be a great enhancement if you're asking this sort of questions :) Install, restart and look at the Console
Related to focus is the order in which elements are given the focus, that is the order of tabbing navigation and the tabindex attribute with its values -1, 0 or positive when it exists
Any DOM element can receive focus amongst other some event handlers.
See answer 1.
Focus is passed around and not removed.
Focus can only be set by the DOM using JavaScript.
You can also use dojo.place to put things in the correct for focus.