jQuery onfocus onblur problem

I'm having some trouble getting my onFocus and onBlur events to work properly

Here's what I got

var var1

$("input").focus(function() {

  var1 = $(this).val()

if ( $(this).val()==var1) {
       $(this).val('').css({'color': "#000", 'font-style': 'normal', 'font-weight': 'bold'});
   }  
    $(this).css({'background-color':'#d7df23' });    
});

$("input").blur(function() {
   if ( $(this).attr("value")=="") {
       $(this).val(var1).css({'color': "#666", 'font-style': 'italic', 'font-weight': 'normal'});
   }   
    $(this).css({'background-color':'#EEEEEE' });      
});

And here's my HTML

<input type="text" id="tbTitle" value="Title">

<input type="text"开发者_StackOverflow社区 id="tbTitle1" value="Title1">

<input type="text" id="tbTitle2" value="Title2">

This works if you don't change the value of the textbox.

Basically I want to get the original value of the input and store it in a var and then if the field is blank put the original value back.

At the moment it is putting the value of whatever is in the textbox on focus

Is there a way to store the original value and only change it to that onBlur?

Here's a link to my jsfiddle

Here is my solution...

http://jsfiddle.net/Sohnee/YTTD5/4/

Or in code...

var originalValues = new Array();

$("input").focus(function() {

    if (!originalValues[this.id]) {
      originalValues[this.id] = $(this).val()
    }

    if ( $(this).val()==originalValues[this.id]) {
           $(this).val('').css({'color': "#000", 'font-style': 'normal', 'font-weight': 'bold'});
       }  
        $(this).css({'background-color':'#d7df23' });    
   });

    $("input").blur(function() {
       if ( $(this).attr("value")=="") {
           $(this).val(originalValues[this.id]).css({'color': "#666", 'font-style': 'italic', 'font-weight': 'normal'});
       }   
        $(this).css({'background-color':'#EEEEEE' });      
   });

try setting var var1 = null; initialy, then when the focus triggers just set it the very first time like var1 = var1 ?? $(this).val(); it looks like you keep overrriding the value each time, also might want to consider storring the original value as data on the actual object instead of global variable

You're using a single var1, but multiple text boxes. So the var1 will be bludgeoned by your entry into another text box when you leave a text box. Also, you're assigning to var1 before you test the value of the element against it, so the == will always be true.

To " get the original value of the input and store it in a var and then if the field is blank put the original value back" you could do something like this:

var values = {};

$("input").focus(function() {

    var $this = $(this);

    // Save the value on focus
    values[this.id] = $this.val();

}).blur(function() {

    var $this = $(this);

    // Restore it on blur
    if ($this.val() == "") {
        $this.val(values[this.id]);
    }

});

I've left out the CSS stuff above because it wasn't quite clear to me what you wanted to do with it. It's easy enough to add back.

sans the CS stuff.. if we enter a field that has a value back that value up in a 'rel' attribute. on exit of the field,if the value is empty, copy in whatever might be in the rel attribute, which is either nothing, or is the value that was present on the initial focus.

$("input").focus(function() {
 if($(this).val()!=''){
  $(this).attr('rel',$(this).val());
 }
});

$("input").blur(function() {
 if($(this).val()==''){
  $(this).val($(this).attr('rel'));
 }
});

You problem is that you storing input value at the moment of focus, not at the moment of it's initial setting. This piece of code may be useful:

var initials ={};
$(document).ready(function(){
  $('input').each(function(){
    initials[this.id] = $(this).attr('value');
  });
});

$('input').focus(function(){
  // do whatever you want to
});

$('input').blur(function(){
  if($(this).attr('value')==''){
    $(this).attr('value', initials[this.id]);
  }
  // do other stuff
});