 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / Browsers / Internet Explorer / June 2005Consistency problems re: checkboxes, tabbing, and focus()
Here's the problem; I have an application that uses .focus() to point out form field validation errors. With regards to the checkboxes on the page, if the checkbox has never been tabbed to, then no cursor is shown. If the checkbox was tabbed to first, then a dashed-box cursor shows around the checkbox when .focus() was called. On the actual page there's some OTHER problem that prevents it from showing properly at that point, but I'm pretty sure if I can solve the first part, that one will fall into place. I've created a sample document: <html> <head> <script> <!-- function f(element) { document.getElementById(element).focus(); } // --> </script> </head> <body> <form> <input name="text1" id="text1"><input type="button" onclick="f('text1');" value="Focus on textbox" ID="Button1" NAME="Button1"><br/> <input type="checkbox" name="check1" id="check1">Check1<input type="button" onclick="f('check1');" value="Focus on checkbox"></form> </body> </html> To see the problem: 1. Click on "Focus on checkbox" (note that no cursor is visible) 2. Press the spacebar (note that the checkbox changes state, indicating where the edit cursor was located) 3. Click on "Focus on textbox" (note the edit I-bar cursor) 4. Press "TAB" twice (note the dashed box cursor) 5. Click on "Focus on textbox" 6. Click on "Focus on checkbox" (note the dashed box cursor, unlike on step 1) Oops forgot to "phrase in the form of a question" Here's my question... Does anyone know of a way to force the dashed box to always show? We've found that changing focus to a random field that doesn't show it's own edit cursor is counter-intuitive and confusing to the user... This is for an application that will be used solely on IE5.5 and up. Hi , We can set the select box border as dash style using CSS. My sample code: <input type="checkbox" name="C1" value="ON" style="border-top-style:dashed;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-Left-Style:dashed;border-right-style:dashed;border-bottom-style:d ashed"> Please feel free to let me know if any question. My pleasure to be of any assistance. Best Regards, Wei-Dong XU Microsoft Product Support Services This posting is provided "AS IS" with no warranties, and confers no rights. Thank you Wei-Dong. I guess what I'll do is set the style elements programmatically when I focus() and unset them when I blur() > Hi , > [quoted text clipped - 12 lines] > Microsoft Product Support Services > This posting is provided "AS IS" with no warranties, and confers no rights. Ok I implemented. It kind of works... but the CSS border is INSIDE the IE focus cursor; so in some circumstances, it's showing a double border. Oh and the border disappears when you scroll. I don't really know how to implement this to be exactly like the existing functionality. I think we're still looking for a solution at this point in time... > Hi , > [quoted text clipped - 12 lines] > Microsoft Product Support Services > This posting is provided "AS IS" with no warranties, and confers no rights. Hi, The display effect you are going to achieve is the control focus state. We have to always focus this control to accurately show the dashed border. However, at your scenario, this is impossible. So I'd suggest you'd better find another method to workaround this issue. For example, we can set the background of the table, hosting the selectbox control, to one bright color so that user can find this particular selectbox very easily. Please feel free to let me know if you have any question. My pleasure to be of any assistance. Best Regards, Wei-Dong XU Microsoft Product Support Services This posting is provided "AS IS" with no warranties, and confers no rights. Hi, > 1. Click on "Focus on checkbox" (note that no cursor is visible) With my IE 6.0.2900.2180.xpsp_sp2_gdr.050301-1519 this seems to work OK. That is, the dashed box is shown around the checkbox already in step 1. You should test this with other versions of IE to see where it was fixed. You might also try to add an explicit TABINDEX attribute to your checkboxes to see if it has any effect. -- Mikko Noromaa (mikkon@excelsql.com) - SQL in Excel, check out ExcelSQL! - see http://www.excelsql.com - > Here's the problem; I have an application that uses .focus() to point out > form field validation errors. With regards to the checkboxes on the page, [quoted text clipped - 37 lines] > 6. Click on "Focus on checkbox" (note the dashed box cursor, unlike on > step 1) heh the funny part is that's my exact version. We have determined that this is somewhat inconsistent in behaviour however so that doesn't necessarily mean anything... > Hi, > [quoted text clipped - 54 lines] > > 6. Click on "Focus on checkbox" (note the dashed box cursor, unlike on > > step 1) |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.