| 5:23 am on May 16, 2010 (gmt 0)|
Try adding the attribute hidefocus="true" to your input element. It used to work anyway.
Side note: it is usually not a good idea to obscure the focus event. Doing so sacrifices usability and accessibility for non-visual browsers. But it's your decision whether to make that trade-off.
| 6:35 am on May 16, 2010 (gmt 0)|
Thanks, tedster, the hidefocus attribute worked.
However, taking non-visual browsers into consideration (which I've never done, so I wonder how compatible my site is anyway), can you think of a way to use the onclick attribute to move the focus to a different element instead of supressing the focus of my input element?
I suppose that would still make it inconvenient for a non-sighted user, though. Since the button is meant to be pushed multiple times, they would have to tab back to it each time. Just brainstorming here, mostly out of curiosity.
Do any alternative solutions come to mind?
| 6:27 pm on May 16, 2010 (gmt 0)|
Nothing has ever come to mind or I would have shared it. The dotted line is a browser-specific affectation that has always been kind of ugly to my eyes, but I've finally quit worrying about it. Users of a browser that displays focus that way are used to it, I figure. So now I just let things go to default status.
Note that the "hidefocus" attribute is Microsoft-specific mark-up and it does not validate.
[edited by: tedster at 8:38 pm (utc) on May 16, 2010]
| 8:21 pm on May 16, 2010 (gmt 0)|
Okay, thanks again for the input. I'll consider whether or not to use the hidefocus attribute, but either way it's good to know that it works at least.
| 12:37 am on May 17, 2010 (gmt 0)|
<input type="button" onclick="this.blur(); myFunction(); return true;" />
NOTE: Even if this appears to work, my recommendation would be to forget about this problem rather than use the code above because there may be compatibility issues on complex pages.
| 1:55 am on May 17, 2010 (gmt 0)|
kaled, that works very well. It shows the focus border "onMouseDown" and removes it "onMouseUp", showing the user that their click did something but also preserving the appearance of the image. It also allows the user to tab to the button if desired.
This is a good alternative to the "hidefocus" attribute, but the problem remains that a user must tab back to the button each time they wish to push it. Still diciding if this is something I need to consider for my particular website. Both you and tedster are far more experienced than I am, so I do put weight in the fact that you both recommend against toying with the focus border at all.
One question on the possible compatibility issues you mentioned. If the code is not compatible in certain situations, will the code simply be ignored or might it break something?
| 9:35 am on May 17, 2010 (gmt 0)|
When designing, it's easy to get caught up with unimportant details.
Compatibility issues could arise depending on how the blur() method is implemented. My understanding is that the next control in the tab-order is supposed to be focused - this is pretty silly - so my guess is that browser writers do something else. If blur() is implemented this way, then it really ought to be called focusNext() instead.
| 8:21 pm on May 17, 2010 (gmt 0)|
I agree, that would make more sense. Okay, well thanks again for your input.