Jump to content
iwato

Eliminating The Focus Rectangle

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

Share this post


Link to post
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();}

Edited by Ingolme

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...