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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content