Plateforme Level Extreme
Abonnement
Profil corporatif
Produits & Services
Support
Légal
English
Setting focus to a DIV
Message
De
30/09/2012 14:57:50
 
Information générale
Forum:
HTML5
Catégorie:
HTML
Divers
Thread ID:
01553827
Message ID:
01553994
Vues:
33
>You don't need the form - just an input box should work.
>
>But then why would you need to focus a < div > exactly? If you just want to scroll to the position you might want to look at scrollIntoView:
>
>https://developer.mozilla.org/en-US/docs/DOM/element.scrollIntoView
>
>AFAIK, if you use jQuery("#divElement").focus() it will actually become visible/focused. Not 100% sure but you might want to try that first.

If you have a Web page and you need a DIV pick list, for example, such as I have here presently (however not in that format yet - this will come this month), if the DIV is created dynamically, I need the focus to be on. Why? This is because if your Web page contains a onkeypress event in the body, this allows to add the support of the ESC key to close the DIV. I do have a X on the upper right for each DIV (window like I create and show). But, the ability to use ESC key is a must for me to be able to offer the support of immediate closing or when needed, in case the user doesn't click anywhere on the DIV.

With IE, while this is not formely adopted, loDiv.focus() will work. This assumes loDiv is a reference to the DIV such as with loDIV=window.document.getElementById("MyDiv"). With Firefox, this doesn't work. With the trick of scrollIntoView(), I was not able to make it work. This is probably because of the type of integration I negotiate with the DIV creation and how I show it. Yes, INPUT would work, but only visible. So, as I do not want to show a INPUT where not needed, I had to skip that. INPUT Type=Hidden is the same. If it's hidden, you cannot set the focus into it.

As I have a X on the upper right to close the window, which is a A HREF, I was able to give an ID to it and with getElementById("MyAHref"), I was able to see focus to it. That works in Firefox. In Chrome, that creates some kind of shadow around the X so I had to find something else. What I find is to add another A HREF with nothing before the /A tag. So, in Chrome, I can set focus to the object ID of that link and that would work.

Chrome, however, gave me some difficulties.The reason is that is doesn't support the ESC key as the body level. So, I had to add a special javascript for the onkeypress line and that add the ESC support for Chrome as well as the page level. I showed that in another thread on Friday if you wish to see more about it.

So, even with HTML5, this cross browsing stuff is far from being universal. This is still in earlier stage and I hope we'll see more generic support for all browsers so we can avoid those exceptions and code universally. So, for now, for the main behavior of those DIV, support for ESC and related issues, I have succeeded to have a universal support and look for IE, Firefox and Chrome.
Michel Fournier
Level Extreme Inc.
Designer, architect, owner of the Level Extreme Platform
Subscribe to the site at https://www.levelextreme.com/Home/DataEntry?Activator=55&NoStore=303
Subscription benefits https://www.levelextreme.com/Home/ViewPage?Activator=7&ID=52
Précédent
Répondre
Fil
Voir

Click here to load this message in the networking platform