Jump to content

Eliminating The Focus Rectangle


iwato

Recommended Posts

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

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

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

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

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

.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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...