iwato Posted May 20, 2009 Share Posted May 20, 2009 QUESTION: How does one get the focus rectangle to disappear in Internet Explorer?BACKGROUND: I recently included the following script in my webpage in an effort to eliminate the focus box in Firefox when the user clicks on links used only for the purpose of revealing the contents of the title attribute upon mouse over. I have been told that this script does not work in IE8. I know that it works in the most recent versions of Safari, Opera, and Firefox.JS CODE:<script typt="text/javascript"> function onFocus() { if (this.blur) { this.blur(); } }</script>HTML SAMPLE CODE:<a href="#" onclick="return false" onfocus="onFocus()" title="Japanese equivalent" class="Text_Translation"><em>katakana</em></a><em>English equivalent</em></a>SOURCE PAGE: http://www2.gol.com/users/hsmr/emblem/name.htmlRoddy Link to comment Share on other sites More sharing options...
Ingolme Posted May 20, 2009 Share Posted May 20, 2009 Why don't you just do this? <span class="Text_Translation" title="Japanese equivalent">katakana</span> You don't need a link there if you're not linking to anything.UpdateIn addition, the reason why your function isn't working is because "this" inside a function is usually supposed to refer to the function itself. It's not exactly a standard behaviour to use the HTML element that called it, but it's used by many browsers.In order to make it work well on all browsers, you'll have to pass the element as a parameter: onfocus="onFocus(this)" function onFocus(el) { if (el.blur) el.blur();} Link to comment Share on other sites More sharing options...
jeffman Posted May 20, 2009 Share Posted May 20, 2009 The easiest way to eliminate the focus box is with CSS:.myclass:focus {outline:none}Looking at your page, I'm guessing you want the link because you want the title attribute? Are you aware that all elements support titles? You can just wrap a special word in a span, and give the span a title. You can also give the span CSS to suggest that readers roll over it.My apologies if I misunderstand your intentions. Link to comment Share on other sites More sharing options...
chibineku Posted May 20, 2009 Share Posted May 20, 2009 In addition to previous answers: if you blur something onfocus, then you...lose focus, and can't do anything with the element. Like if you blur a text field onfocus, then you can't type anything into it. Link to comment Share on other sites More sharing options...
iwato Posted May 21, 2009 Author Share Posted May 21, 2009 You don't need a link there if you're not linking to anything.I did not know that you can apply the title attribute to other HTML tags.In addition, the reason why your function isn't working is because "this" inside a function is usually supposed to refer to the function itself. . . . In order to make it work well on all browsers, you'll have to pass the element as a parameter:onfocus="onFocus(this)" function onFocus(el) { if (el.blur) el.blur();} It is a pleasure learning from you, Ingolme.Roddy Link to comment Share on other sites More sharing options...
iwato Posted May 21, 2009 Author Share Posted May 21, 2009 .myclass:focus {outline:none}This is much easier than what Ingolme taught me, but it is not exactly JavaScript. Many thanks, anyway!Looking at your page, I'm guessing you want the link because you want the title attribute?This was true, but having had trouble with the JavaScript that Ingolme has since corrected, I began experimenting with the <dfn> and <span> tags and a display block. Unfortunately, I have not yet mastered the technique, as the resulting display is inconsistent from element to element and browser to browser. Simply, when it works, it appears much better than the title attribute. If you'd like to take a look, please do so at橋守岩人 Its Derivation!If I knew how to apply CSS to the display of the title attribute, it would probably be ideal since all browsers appear to support this attribute.You can also give the span CSS to suggest that readers roll over it.I am not sure what you mean other than the use of inline tags, like <em> with CSS rules attached. The <dfn> tag offers inconsistent results across browsers.My apologies if I misunderstand your intentions.Not at all!Roddy Link to comment Share on other sites More sharing options...
iwato Posted May 21, 2009 Author Share Posted May 21, 2009 In addition to previous answers: if you blur something onfocus, then you...lose focus, and can't do anything with the element. Like if you blur a text field onfocus, then you can't type anything into it.You must like jQuery. I am just getting started with it.Roddy Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.