CODEWITHSUNDEEP
javascript
Ibrahim Azhar Armar
Ibrahim Azhar Armar

Reputation: 25763

how do i convert this piece of code into javascript function?

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?

Upvotes: 2

Views: 178

Answers (6)

Delan Azabani
Delan Azabani

Reputation: 81492

A slightly scary looking, but minimally increasing upon more fields, solution:

function fieldFocus(m, e) {
    if (e.target.value == m) e.target.value = '';
}
function fieldBlur(m, e) {
    if (e.target.value == '') e.target.value = m;
}
function bind() {
    var f = arguments.shift();
    var t = arguments.shift();
    var a = Array.prototype.slice.call(arguments);
    return function() {
        return f.apply(t, a.concat(arguments));
    };
}
var name = document.getElementById('name');
var email = document.getElementById('email');
var message = document.getElementById('message');
[[name, 'Enter name...'],
 [email, 'Enter email...'],
 [message, 'Enter message...']].
forEach(function(field) {
    field[0].addEventListener('focus', bind(fieldFocus, null, field[1]), false);
    field[0].addEventListener('blur', bind(fieldBlur, null, field[1]), false);
});

Upvotes: 0

Eric
Eric

Reputation: 97691

Looks like you might be looking for HTML5's placeholder attribute. Usage as follows:

<input type="text" id="name" name="name"
    class="input-text" placeholder="Enter Name..." />

<input type="text" id="email" name="email"
    class="input-text" placeholder="Enter Email Address..." />

<textarea name="message" id="message"
    class="input-textarea" placeholder="Enter your Message..."></textarea>

Demo here

Upvotes: 2

Sukhjeevan
Sukhjeevan

Reputation: 3156

Try this one:

HTML:

<input type="text" id="Text1" name="name" class="input-text" />
<input type="text" id="Text2" name="email" class="input-text" />
<textarea name="message" id="Textarea1" class="input-textarea" ></textarea>

JQuery:

$("#name").focus(function(){
    if($(this).val() == "Enter Name...")
        $(this).val("");
}).blur(function(){
    if($(this).val() == "")
        $(this).val("Enter Name...");
});
$("#email").focus(function(){
    if($(this).val() == "Enter Email Address...")
        $(this).val("");
}).blur(function(){
    if($(this).val() == "")
        $(this).val("Enter Email Address...");
});
$("#message").focus(function(){
    if($(this).val() == "Enter your Message...")
        $(this).val("");
}).blur(function(){
    if($(this).val() == "")
        $(this).val("Enter your Message...");
});

Upvotes: 0

Guffa
Guffa

Reputation: 700850

If you are using jQuery, you can use something like this to pick up the lead text from each element and change it on focus and blur:

$(function(){
  $('.input-text,.input-textarea').each(function(){
    var lead = $(this).val();
    $(this).focus(function(){
      if($(this).val() == lead) $(this).val('');
    }).blur(function(){
      if ($(this).val().length == 0) $(this).val(lead);
    });
  });
});

Upvotes: 1

Hamish
Hamish

Reputation: 23354

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'));

Upvotes: 3

krtek
krtek

Reputation: 26617

function gainFocus(element, text) {
    if(element.value == text) {
        element.value = '';
    }
}

function loseFocus(element, text) {
    if(element.value == '') {
        element.value = text;
    }
}

Then, you can use the two function in your element :

<input type="text" id="name" name="name" class="input-text" value="Enter Name..." onfocus="gainFocus(this, 'Enter Name...');" onblur="loseFocus(this, 'Enter Name...')" />

Upvotes: 0

Related Questions