Question

i have a form where it has the default value prompting user to enter data.

here is my form.

<input type="text" id="name" name="name" class="input-text" value="Enter Name..." onfocus="if(this.value == 'Enter Name...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Name...';}" />

<input type="text" id="email" name="email" class="input-text" value="Enter Email Address..." onfocus="if(this.value == 'Enter Email Address...') { this.value = '';}" onblur="if(this.value == '') { this.value ='Enter Email Address...';}"/>

<textarea name="message" id="message" class="input-textarea" onfocus="if(this.value == 'Enter your Message...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your Message...';}">Enter your Message...</textarea>

there are lots of code repeatation here. i want to convert the below code into the javascript function.

onfocus="if(this.value == 'Enter Name...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Name...';}"

how do i do that?

Answer 1

Rather than including any code ‘in-line’ you could do:

function autoHideDefault(el) {
    var defaultValue = el.value;
    el.onblur = function() { 
        if(this.value == '') this.value = defaultValue ;
    }
    el.onfocus = function() {
        if(this.value == defaultValue) this.value = '';
    }
}

autoHideDefault(document.getElementById('name'));
autoHideDefault(document.getElementById('email'));
autoHideDefault(document.getElementById('message'));