In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > hideFocus

hideFocus property

Browser support:

Specifies or returns whether a dotted rectangle (focus rectangle) is drawn around an object while it has focus.

This property has effect only for the focus rectangle.

If you want prevent the user from interacting with the object, use the disabled property.
If you want prevent the contents of the object from being changed, use the readOnly property.
In Firefox, Opera, Google Chrome and Safari, you can use the outline style property with a value of 'none' for similar functionality.

Syntax:

object.hideFocus;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: HIDEFOCUS

Possible values:

Boolean that indicates tha state of focus visibility.

One of the following values:

false

No visual focus is visible.

true

Visual focus is visible.

Default: false.

Example HTML code 1:

This example illustrates the use of the hideFocus attribute:

Use the TAB key to see the difference between the two buttons 
<button>Button With Rectangle</button>
<button hidefocus="hidefocus">Button Without Rectangle</button>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the hideFocus property:

<head>
    <script type="text/javascript">
        function ChangeFocus () {
            var buttons = document.getElementsByName ("myButton");

            if ('hideFocus' in buttons[0]) {
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].hideFocus = !buttons[i].hideFocus;
                }
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    Use the TAB key to see the difference between the two buttons 
    <button name="myButton">Button With Rectangle</button>
    <button name="myButton" hidefocus="hidefocus">Button Without Rectangle</button>

    Click this button to change buttons hideFocus state:
    <button onclick="ChangeFocus ();">Change hideFocus states!</button>
</body>