I feel like I understand focus():
When trying to focus on a form element, like input, it "just works", so long as the document is ready.
When trying to focus on a non-form element, like div, you must add a tabindex attribute.
tabindex adds the ability to tab to an element in precedence order (higher number the better), 0 and up. However, there's a special value, -1, that explicitly removes the element from the tab order.
When calling focus programmatically, do so within a setTimeout.
Be sure to make a setTimeout value large enough that it waits for display animations to finish, but not so late that the user has time to do other things, like click or type elsewhere.
Pretty simple, really, right? But no. It just doesn't work for me.
My specific use-case is that I have a key-nav-enabled widget that, if you hit the right key, opens a pop-over modal widget. It works great. But I can't get that modal widget to take focus. That modal widget that has no form inputs (just some text and a close link). I've added keydown/up/press events to the modal widget, I've added tabindex to various nodes and tried to focus them, but the original widget still gets the keyboard events.
DOM-wise, the modal widget, despite being new'd up within the keynav widget, is attached to the DOM at the body level, so it's not like the keyboard events are bubbling up through my modal dialog and should be stopPropagation'd, it's never getting those events.
What this means is that if you hit another key before you click in the modal widget, it opens a different modal dialog underneath the first modal dialog!
I really hope I'm missing something about focusing divs, because I have several pieces of functionality I'd like to implement that just aren't working due to (I believe) focus requests simply being ignored.
Help! What am I missing?
In the specific case I was sleuthing out, I effectively had a typo.
I was doing this, which wasn't working:
setTimeout(lang.hitch(this, this.domNode.focus), 100);
But this worked:
setTimeout(function() { this.domNode.focus() }, 100);
That said, I've had a number of issues with focus that regularly make me dread ever having to use it programmatically.
Hopefully though, the list of tips in the question will be helpful to someone.
Related
I want to create a little WYSIWYG editor.
The idea:
First I want to add the feature to write and change text. So I add an onClick and onKeyBoard Listener to my div container. When I click the div I set a varaible named "focused" to true. When an key event is fired I check if focused is true. In case focus is false nothing will happen else the new charater will be added on the cursor's position.
My questions:
Is this the right way? I tried to check how other editors handle the text input but I wasnt able to get it.
In case this is the right way - how can I simulate a blinking cursor. In a textarea the cursor will blink but who about a div container? The cursor will hide immideatly after clicking.
I'm assuming you're doing this for fun/practice. If you're doing this for professional reason then I HIGHLY recommend you don't reinvent the wheel and use something like Ckeditor, tinyMCE or YUI.
That being said; you need to look into event handling. Specifically, for your question about focusing, you can look here. The way you're describing (setting a variable to true/false) seems like it is going to just run into problems. If you use the standard events attribute (as opposed to setting a "focus" variable onclick) you should define functions to execute and then set them as an onfocus/onblur attribute for the element you're listening to.
That is if you aren't using a javacript library like mootools, jquery, extJS, etc. If you're using one of those they likely have their own way of handling events, so you should search their respective documentation for how to implement event handlers.
One more note; you really should be using a textarea over a div (unless I'm misunderstanding and you just want to do something when a user focuses on your div). If you're using javascript only to completely reinvent a texteditor from a div; then your web page will not function without javascript. If you keep the text area; users could still type information in and you still get the benefit of grabbing text contents for form submits but using divs means your web page will just be rendered useless without javascript.
I was trying to learn how to build the date picker like the one at http://jqueryui.com/demos/datepicker/
Basically i make the "date popup" display=none at the onblur event of the textbox, but of course this isn't working (because if the user clicks on the popup box itself, it will trigger the blur event of the textbox and hides the popup box, which isn't what I wanted)
I'm wondering how do we make it such that when the user clicks on anywhere but the popup box, the popup box will close.
The jQuery UI datepicker is a pretty advanced widget. The developers for jQuery UI have an event handler called _checkExternalClick that is applied to the mousedown event. This event handler checks for several things (is the datepicker opened, is the id of the element clicked == to the id of the datepicker, does the datepicker have a markerclass (adds to element className to indicate datepicker attachment), does the datepicker have a triggerclass (e.g. icon trigger), etc.). If everything passes, the _hideDatepicker function is called.
Here is a simplified example of what the jQuery UI datepicker is doing: http://jsfiddle.net/GSzYF/. You probably won't need to check for everything the jQuery UI datepicker checks for, because the widget you write will most likely not need to be as customizable as a distributed framework.
The simple option is to create a click-capturing, transparent div with a z-index that is less than your popup. Set the div style to position:fixed;width:100%;height:100%;left:0;top:0 so that it encompasses the whole visible screen. You will probably want to append this to the body tag's content, so that you can make sure it's not contained within something else with fixed or absolute position.
Then, all you need to do is tie your close handler to this div, and when it's clicked you can tear down the popup as well as the div itself.
If you want to get fancy, you can make that div very slightly opaque, which helps indicate to the user that their focus should be on the popup.
Your other option is to track the mousedown or click event on the window object, compare the mouse coordinates to the bounding box of the popup, and handle outside clicks by closing the popup and preventing the default event action. Frankly this is a lot more complicated and prone to bugs, so shoot for the first technique if it suits your needs.
I implemented a custom drop down with HTML, CSS and JavaScript. It works well now, but I am not happy with the way I am doing "blurring" right now. When you open the list, and then click somewhere else, it should collapse. What I did was that I added an event listener (mousedown) to the window after expanding the list, and removing the listener after collapsing. The event basically checks whether the DOM event happened on the right element using target and if not, then blur the drop down control.
I know about focus and blur. However, they only seem to work on form elements, which I find quite understandable. They also support other scenarios like when "tabbing" away.
Anyway, I am asking you if there is a better way of doing what I am doing right now. What I do just feels stupid.
Maybe you could have a dummy input and focus that when the control is active. Then watch the blur and close the list. It would not be able to be display:none but maybe opacity:0, or just out-of-view.
What I do is use mouseout to close my custom lists. I create a bounding box around my drop down. That box has the onmouseout event attached to it that closes the drop down when the mouse moves outside of it. This way you can have a little padding outside your list that would give your users a little better functionality then just mouseout on your basic list.
If you want to do it using click events, I would have a global function, like it seems you have setup, and call that function on any click events on the page.
Forcing focus() on an element is easy, but after having debug issues, I realize trying to determine where is my focus gone is a lot harder.
The thing is I'm generating a modal window using jq.UI, and from time to time, while focus is supposed to be set on first input of the form included in the modal, cursor just disappears, to never show again unless I reload the page.
Is there a straightforward way to detect where my focus/cursor is?
You can see which element it's on by checking document.activeElement, for example:
alert(document.activeElement.innerHTML); //see the content to aid in IDing it
I'm not sure if the focus event bubbles, but if it does, you could try this:
jQuery('body').focus(function(e){ console.log(e.target); })
I'm trying to modify this: jquery desktop
by adding a input field inside one of the windows. However, I can't type anything into the input. I opened firebug and the classes are flashing when I click the text input so I'm guessing that's what's blocking it. But I don't know how to fix this. Any help is appreciated.
In his very long article, do a page search for 'Cancel mousedown'. You'll see he's canceled any mousedown event that's not a link. That's what you'll have to alter to make it usable. You could either delete the whole thing (the point was to bind a context menu, which he ended up not doing) or add input as an exception like a is.