HTML and Javascript: How to manage element focus? - javascript

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.

Related

How to get focus of textarea in dotnetbrowser?

I am looking through the samples and I have got solution for focusing on dom element using tab.I am trying to focus on textarea which is on site,
so i had used virtual Tab key press to find that particular textarea and its working correctly.
But can anyone suggest how to directly focus on textarea. I also used excuteJavascript function but its not working.
DotNetBrowser DOM API provides two methods: DOMElement.Focus() and DOMElement.Blur(). This functionality allows you to request focus on particular HTML DOM element.

How to find out what event is firing on what element

Is there a tool (or something in firebug) that will tell me what events just fired and more importantly on what elements they were bound to?
I have a number of javascript "includes", some minified, some not. I am experiencing some odd behaviour that I want to turn off, but I cannot find what is causing it.
I have a form showing in a "popup" and when I try to click on one of the input boxes, the "popup" closes, so some event bind somewhere is causing this.
The problem is, I don't know what element has this spurious event bound to it. The problem also occurs if I click anywhere inside the popup (and on the background mask that is covering the rest of the page, but that's acceptable)
I am using firefox, so anything I can type in the console is also an option. The eventys in the multiple javascript files are done in various ways, some through jquery, some using inline attributes (eg. onclick="..."), some using just javascript.
I certainly don't want to go and add some line of code to every possible event in every javascript file.
I have spent over an hour trying to hunt down this dom element and have already eliminated the obvious ones like the divs containing the popup and the body tag.
DOM modifications can be tracked down using the Break On Mutate option within Firebug. It can be activated by clicking the related button ( ) within the HTML panel. Note that the Script panel has to be enabled for this to work.
There are also several other Break On ... features, which may help you finding the right position within the code for a specific event.
Furthermore Firebug 2.0 introduced an Events side panel, which displays all events bound to the element selected within the HTML panel. If libraries like jQuery are used, it will even allow you to investigate the user-defined function wrapped by the library function in case you enable the option Show Wrapped Listeners as described in the answer to a related question.

Frame within a HTML-Form, how Tab Key works?

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.

How can I retain `contenteditable` focus() events in a Meteor template?

I have a <div contenteditable class="content"> </div> in my template whose inner HTML is tied to Mongo. When I (dynamically) add a new .content, I'd like to be able to focus it so that the next thing a user types is entered in the contenteditable div.
However, the .focus() event doesn't play nicely with Meteor's rerendering; even SO's hacks don't work: The JS executes without error, but the focus event doesn't seem to trigger anything (or, it does but it's immediately overwritten by Meteor's rendering).
My question is: How can I force focus that div? A plan I considered was setting a tabindex and then artificially tabbing to that element, but I'm hoping to not have to resort to such silliness.
[EDIT] I'm aware of the {{#constant}} tag, but as far as I can tell, that stops the element from being rerendered at all, which is certainly not what I want.
Place focus code into Template.blah.rendered.

How to enable/disable a custom control created on the fly (seeing the original control) if parent control is enabled/disabled

I have an HTML <select> in many places in my application, and I want to replace it with a custom drop down. I have created the custom control which will replace the HTML <select> on DOM ready.
Now, I want to implement something that will disable/re-enable my new control if there is a Javascript disabling/enabling the original control without doing any changes in the application elsewhere except within the control.
How is it that I can capture the event of the HTML select control being disabled or enabled and attach some code to that? Is there any other way to do it?
UPDATE:
I got this thing working in IE7, Safari/Chrome but its not working in mozilla. Sample code in here http://jsfiddle.net/M73Wg/3/
This is a tricky one. Unfortunately (I believe) there is no straight answer. It comes down to: Yes you can do so by using JavaScripts DOMAttrModified event listener, but it's not cross-browser compatible.
Here are a few resources that might help you:
Detect Attribute Changes with jQuery (possible solution)
Is it possible to listen for changes to an object's attributes in JavaScript?
Listen for changes of checked/disabled in jQuery
Finally used timeout only http://jsfiddle.net/8EtJK/6/
DOMAttrModified is not working in mozilla
Regards,
SJ

Categories

Resources