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

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

placeholder property

Browser support:

Sets or retrieves the initial value of the text field.

Different from the value property. The placeholder property only displays an initial value for the control. The initial value is not the value of the control, it is only a text that is displayed initially in the element. When the control gets the focus, the initial value disappears.

If you need an example that implements the functionality of the placeholder property in all commonly used browsers, see Example 3.

Syntax:

object.placeholder;

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

This property is read/write.

HTML page for this property: placeholder

Possible values:

String that sets or retrieves the initial value.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the placeholder attribute:

<input type="text" placeholder="Please fill this field" />

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example modifies the value of the placeholder property:

<head>
    <script type="text/javascript">
        function ModifyPlaceHolder () {
            var input = document.getElementById ("myText");
            input.placeholder = "No need to fill this field";
        }
    </script>
</head>
<body>
    <input type="text" id="myText" placeholder="Please fill this field" /> 
    <button onclick="ModifyPlaceHolder ()">Modify the initial text</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This cross-browser example implements the functionality of the placeholder property:

<head>
    <script type="text/javascript">
        function ClearPlaceHolder (input) {
            if (input.value == input.defaultValue) {
                input.value = "";
            }
        }
        function SetPlaceHolder (input) {
            if (input.value == "") {
                input.value = input.defaultValue;
            }
        }
    </script>
</head> 
<body>
    <input type="text" value="Please fill this field" onfocus="ClearPlaceHolder (this)" onblur="SetPlaceHolder (this)" /> 
</body>