Need help converting this inline javascript to a jQuery function

Question

I have the following HTML/JS that shows an initial value, removes it when you click in the input field, and then re-populates it with the original value if you don't enter anything.

I need to do this on multiple input fields on the same page and thus would like to turn it into a jQuery function that I could then apply to any input field with a certain class.

<input type="text" name="search" value="Search by name" onfocus="if (this.value == 'Search by name') {this.value = '';this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Search by name';this.style.color = '#aaa';}" />

Breton · Accepted Answer · 2009-12-17 12:01:09Z

1

Firstly, make your life easier and give the input a class:

<input type="text" class="search" name="search">

You can use an attribute selector:

$(":text[name='search']")...

but this is much faster:

$("input.search")...

and then use this:

$(function() {
  $("input.search").focus(function() {
    this.defaultval = this.defaultval || $(this).val();
    if ($(this).val() == this.defaultval) {
      $(this).val("").css("color", "#000");
    }
  }).blur(function() {
    if ($(this).val() == "") {
      $(this).val(this.defaultval).css("color", "#AAA");
    }
  });
});

edited Dec 17, 2009 at 12:01

Breton

15.6k4 gold badges61 silver badges77 bronze badges

answered Dec 16, 2009 at 23:51

cletus

627k169 gold badges922 silver badges945 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Breton Over a year ago

"a jQuery function that I could then apply to any input field with a certain class."

Breton Over a year ago

That is, your solution isn't quite as general as what the OP was asking for.

Breton Over a year ago

It's still not very general since it assumes "Search by name" is a constant.

Shpigford Over a year ago

How do I make this work with multiple form fields? What would be nice is if it grabbed the contents of the value attribute so I can use it with any/multiple input fields.

Sampson · Accepted Answer · 2009-12-16 23:51:53Z

1

$(":text[name='search']")
  .focus(function(){
    if ($(this).val() == 'Search by name')
      $(this).val("").css("color", "black");
  })
  .blur(function(){
    if ($(this).val() == "")
      $(this).val("Search by name").css("color", "#aaa");
  });

answered Dec 16, 2009 at 23:51

Sampson

269k76 gold badges546 silver badges570 bronze badges

2 Comments

Shpigford Over a year ago

How do I make this work with multiple form fields? What would be nice is if it grabbed the contents of the value attribute so I can use it with any/multiple input fields.

Sampson Over a year ago

You can apply this to any number of fields by changing the selector, and making it more broad. I'm not sure what you mean by grabbing the value though.

czarchaic · Accepted Answer · 2009-12-17 03:51:01Z

0

Turn it into a plugin

$.fn.inputMagic=function(text){
  return this.each(function(){
    var text=$(this).val()||text||''
    $(this).focus(function(){
     if ($(this).val() == text){
       $(this).val("").css("color", "black");
     }
    }).blur(function(){
      if ($(this).val() == ""){
       $(this).val(text).css("color", "#aaa");
      }
    });
  });
}

Then you can call it like this

$('input.search').inputMagic('Search by name').show();//and continue to chain

edited Dec 17, 2009 at 3:51

answered Dec 17, 2009 at 1:52

czarchaic

6,34832 silver badges24 bronze badges

2 Comments

Shpigford Over a year ago

How do I make this work with multiple form fields? What would be nice is if it grabbed the contents of the value attribute so I can use it with any/multiple input fields.

czarchaic Over a year ago

I modified the code to capture the value of the field as its default. (Line 3)

Breton · Accepted Answer · 2009-12-17 12:03:34Z

0

untested

jQuery(function () {
jQuery("input[type=text]").bind("focus",function(e){
   var input = e.target;
   input.defaultval = input.defaultval || input.value;
   if(input.value==input.defaultval) {
       input.value = "";
       input.style.color = '#000';

   }
}).bind("blur",function(e){
      var input = e.target;
      if(input.value == '') {
         input.value = input.defaultval;
         input.style.color = '#aaa';
      }
})

});

edit: this seems to be a more general solution than the others. It takes as default text whatever happens to be in the input field first. Though I don't bother wrapping the event target in a jquery to alter the CSS.

edited Dec 17, 2009 at 12:03

answered Dec 16, 2009 at 23:55

Breton

15.6k4 gold badges61 silver badges77 bronze badges

Collectives™ on Stack Overflow

Need help converting this inline javascript to a jQuery function

4 Answers 4

4 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related