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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > defaultValue (input, textarea, ...)

defaultValue property (input, textarea, ...)

Browser support:

Specifies or returns the initial value of the object. The initial state can be set with the value attribute in HTML.

If you want to get or set the current value of an object, use the value property.
The defaultValue property can be useful if you want to check whether the contents of a control have been changed.

Syntax:

object.defaultValue;

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

This property is read/write.

Possible values:

String that sets or retrieves the default value of the object.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the defaultValue property:

<head>
    <script type="text/javascript">
        function GetDefValue () {
            var elem = document.getElementById ("myInput");
            var defValue = elem.defaultValue;
            var currvalue = elem.value;
            if (defValue == currvalue) {
                alert ("The contents of the input field have not changed!");
            } else {
                alert ("The default contents were " + defValue + 
                       "\n  and the new contents are " + currvalue);
            }
        }
    </script>
</head>
<body>
    <button onclick="GetDefValue ();">Get defaultValue!</button>
    <input type="text" id="myInput" value="Initial value">
    
    <br />
    The initial value will not be affected if you change the text in the input field.
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example sets an initial value of a text field. When the field gets the focus, the initial value disappears, when the field loses the focus and it is empty, the initial value reappears:

<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>