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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozUserModify

MozUserModify style property | webkitUserModify style property

Browser support:

MozUserModify

webkitUserModify

Specifies or retrieves which part of the contents of an element can be modified by the user.

This property is the same as the user-modify property in the CSS3 declaration. The MozUserModify property does not seem to work in Firefox. In Google Chrome and Safari, use the webkitUserModify property together with the contentEditable property.

Syntax:

object.MozUserModify;
object.webkitUserModify;

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

MozUserModify:	This property is read/write.
webkitUserModify:	This property is read/write.

CSS page for this property: -moz-user-modify

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

read-only

Default. User can view/select/copy information in the element, but cannot modify the contents.

read-write

User can view/select/copy and edit the contents of the element.

read-write-plaintext-only

User can select/edit only the plain text content of the element.

write-only

User can select/edit element contents, but cannot view it.

Default: read-only.

Example HTML code 1:

This example illustrates the use of the -moz-user-modify and the -webkit-user-modify properties:

<head>
    <style>
        .readonly {
            -moz-user-modify: read-only;
            -webkit-user-modify: read-only;
        }
        .readwrite {
            -moz-user-modify: read-write;
            -webkit-user-modify: read-write;
        }
    </style>
</head>
<body>
    <div class="readonly" contenteditable="true">The user is not able to change this text.</div>
    <div class="readwrite" contenteditable="true">This text can be modified by the user.</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozUserModify and webkitUserModify properties in JavaScript:

<head>
    <style>
        .readonly {
            -moz-user-modify: read-only;
            -webkit-user-modify: read-only;
        }
    </style>

    <script type="text/javascript">
        function ChangeEditable (selectTag) {
            var div = document.getElementById ("example");

            if ('MozUserModify' in div.style) {
                div.style.MozUserModify = selectTag.value;
            } else if ('webkitUserModify' in div.style) {
                div.style.webkitUserModify = selectTag.value;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="example" class="readonly" contenteditable="true">The user is not able to change this text.</div>

    <select onchange="ChangeEditable (this);" size="3">
        <option value="read-only" selected="selected" />read-only
        <option value="read-write" />read-write
    </select>
</body>