CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mark
Mark

Reputation: 488

Form input show hide default value on focus

I am using the below code to show hide the default input value on focus. However, I am going to be using a few forms on one page and dont really want to have create this js for each input field, pretty time consuming and probably a bit too much js.

Html

<input type="text" class="sb" value="Search CT..."/>

Javascript

 //search box
 $("input.sb").focus(function(){
     if ( $(this).val() == "Search CT...")
    $(this).val('');
 });
 $("input.sb").blur(function(){
     if ( $(this).val() == "")
     $(this).val('Search CT...');
 });

I was wondering if there was a way to create some generic JS to show/hide the default value, regardless of its content which would work on all form inputs??

Hope this makes sense, thanks very much.

Upvotes: 2

Views: 7348

Answers (5)

lonesomeday
lonesomeday

Reputation: 237865

This code will look through all your text input elements and textarea elements on page load. It will store their original values using $.data. It will then do the emptying and refilling as appropriate.

$(document).ready(function(){
    $('form input:text, form textarea').each(function(){
        $.data(this, 'default', this.value);
    }).focus(function(){
        if ($.data(this, 'default') == this.value) {
            this.value = '';
        }
    }).blur(function(){
        if (this.value == '') {
            this.value = $.data(this, 'default');
        }
    });
});

Upvotes: 7

zod
zod

Reputation: 12417

$("input").focus(function(){ 
            $(this).val(''); 
 });

or give a common class for each input field

Upvotes: 0

Alpesh
Alpesh

Reputation: 5405

Try below code - 

$(document).ready(function(){
    var value = '';
    $("input.sb").focus(function(){
     value = $(this).val();
     if (value != ""){ 
        $(this).val('');
     }
     });
     $("input.sb").blur(function(){
     if ( $(this).val() == ""){
         $(this).val(value);
     }
     });

});

Upvotes: 1

Harmen
Harmen

Reputation: 22438

You could create a map, more or less like this:

Javascript

function setEvents( id, txt ){
  $("#" + id)
    .focus(function(){
      if ( $(this).val() == txt) $(this).val('');
    })

    .blur(function(){
      if ( $(this).val() == "") $(this).val(txt);
    });
}

var map = {
  input1: "your text",
  input2: "other text"
};

for(var i in map){
  setEvents( i, map[i] );
}

Where the keys of the map object represent input ID's and the values represent the default value

Upvotes: 0

mikefrey
mikefrey

Reputation: 4681

Looks like you're using jQuery. Have you tried using a plugin?

Here's one that will do what you need: http://plugins.jquery.com/content/default-text-inputtext-fields-required-rule-modification

Upvotes: 0

Related Questions