Uzyskaj domyślną wartość wejścia przy użyciu jQuery

Question

$(".box_yazi2").each(function() { 
    var default_value = this.value; 
    $(this).css('color', '#555'); // this could be in the style sheet instead 
    $(this).focus(function() { 
     if (this.value == default_value) { 
      this.value = ''; 
      $(this).css('color', '#000'); 
     } 
    }); 
    $(this).blur(function() { 
     if (this.value == '') { 
      $(this).css('color', '#555'); 
      this.value = default_value; 
     } 
    }); 
}); 

Ta funkcja wartości domyślnej robi praca wejście w FF, ale doskonale działa w IE i oczywiście samo wejście wygląda następująco:

<input type="text" class="box_yazi2" id="konu" name="konu" value="Boş" /> 

Answer 1

Rozwiązanie jest dość łatwe; masz dodatkowy kod }); (dzięki @ Box9).

Zachęcam do ponownego użycia zmiennej i nie tworzenia kilkudziesięciu obiektów jQuery.

Zmieniłem twój przykład na background-color, ale to zadziała.

$('.box_yazi2').each(function(index, element) { 
    var $element = $(element); 
    var defaultValue = $element.val(); 
    $element.css('background-color', '#555555'); 
    $element.focus(function() { 
     var actualValue = $element.val(); 
     if (actualValue == defaultValue) { 
      $element.val(''); 
      $element.css('background-color', '#3399FF'); 
     } 
    }); 
    $element.blur(function() { 
     var actualValue = $element.val(); 
     if (!actualValue) { 
      $element.val(defaultValue); 
      $element.css('background-color', '#555555'); 
     } 
    }); 
}); 

demo

Answer 2

Wystarczy użyć właściwości defaultValue:

var default_value = $(this).prop("defaultValue"); 

czyli

var default_value = this.defaultValue; 

Answer 3

Używam następny kod:

//clear the focused inputs 
$('input[type="text"]').focus(function(){ 
    if($(this).attr('value') == $(this).attr('defaultValue')){ 
     $(this).attr('value', ''); 
    }; 
}); 
$('input[type="text"]').blur(function(){ 
    if($(this).attr('value') == ''){ 
     $(this).attr('value', $(this).attr('defaultValue')); 
    }; 
}); 

Answer 4

Zastosowanie this.defaultValue

Przepraszamy za link do w3notcools, http://www.w3schools.com/jsref/prop_text_defaultvalue.asp

Answer 5

$('input[type="text"]').focus(function(){ 
      elementValue = $(this).val(); 
      $(this).val(""); 
     }); 
     $('input[type="text"]').blur(function(){ 
      if($(this).val() != elementValue && $(this).val() != ""){ 

      }else{ 
       $(this).val(elementValue); 
      } 

     }); 

Answer 6

Należy użyć prop zamiast tak wielu funkcji, aby być uczciwym, stosowanie „delegat” zamiast „o” na koniec statyczne wiązanie .

$('.box_yazi2').each(function() { 

$(this).on('focus', function(){ 

    if($(this).val() == $(this).prop('defaultValue')){ 

     $(this).val(''); 
     $(this).css('color', '#000'); 
    } 

}); 

$(this).on('blur', function(){ 

    if($(this).val() == ''){ 

     $(this).val($(this).prop('defaultValue')); 
     $(this).css('color', '#000'); 
    } 

}); 

});