jQuery Text löschen onfocus

Question

Ich habe versucht, einen Standardwert in einer Texteingabe haben, dann mit jQuery, wenn Sie "onfocus" das Textfeld, macht es den Text schwarz (Standard ein helles Grau), und löscht den Standardwert. Ich denke, Sie wissen, wovon ich spreche, also wissen Sie, wie man dies erreichen kann?

Answer 1

<input class="txtClass" type="text" defaultVal="Enter your Name" />
<input class="txtClass" type="text" defaultVal="Enter your Designation" />

javascript

$('body').ready(function(){
  $('.txtClass').each( function () {
    $(this).val($(this).attr('defaultVal'));
    $(this).css({color:'grey'});
      });

  $('.txtClass').focus(function(){
    if ( $(this).val() == $(this).attr('defaultVal') ){
      $(this).val('');
      $(this).css({color:'black'});
    }
    });
  $('.txtClass').blur(function(){
    if ( $(this).val() == '' ){
      $(this).val($(this).attr('defaultVal'));
      $(this).css({color:'grey'});
    }
    });
});

Siehe Arbeitsbeispiel: http://jsbin.com/ovida3
http://jsbin.com/ovida3/2

Answer 2

El Jquery-Wasserzeichen-Plugin ermöglicht es Ihnen, den gewünschten Effekt zu erzielen.

Answer 3

$('input:text').bind({
    focus: function () {
        var self = $(this);

        if (self.val() == self.attr('defaultValue')) {
            self.val('').removeClass('default');
        };
    },
    blur: function () {
        var self = $(this),
            val = jQuery.trim(self.val());

        if (val == "" || val == self.attr('defaultValue')) {
          self.val(self.attr('defaultValue')).addClass('default');  
        };
    }
}).trigger('blur');

Haben eine CSS-Klasse von default die die Textfarbe auf die von Ihnen gewünschte Farbe setzt.

Beispiel für die Verwendung: http://www.jsfiddle.net/2S9hW/

Answer 4

Was ich derzeit für die Eingabe von Stadtwerten verwende. Beim Scharfstellen wird der Wert entfernt. Bei Unschärfe (nicht fokussiert) wird der Standardwert zurückgegeben, aber der Benutzer wird darüber informiert, dass er erforderlich ist.

css

`.red{color:red;}`

html

<input type="text" class="city" value="City" id="oCity" name="oCity"></input>
<label class="oCity red"></label>
<input type="text" class="city" value="City" id="dCity" name="dCity">
<label class="dCity red"></label>
<input type="text" class="city" value="City" id="dCity" name="dCity">
<label class="dCity red"></label>

jquery

$(document).ready(function() {
var defaultVal = 'City';
$('.city').focus(function() {
    $(this).val('');
});
 $('.city').blur(function(){
    var Value = $(this).val();
    var oId = $(this).attr('id');
    if(Value == '')
    {
        $(this).val(defaultVal);
        $('.'+oId).text('Required');
    }           
});
});

Answer 5

Sie erstellen im Grunde das, was das Platzhalter-Attribut des HTML5-Textelements unterstützt. Sie sollten also nur das Platzhalter-Attribut verwenden und dann prüfen, ob der Browser die Platzhalter-Funktionalität unterstützt:

function supports_input_placeholder() {
    var i = document.createElement('input');
    return 'placeholder' in i;
}
if (!support_input_placeholder()) {
    $(':text').focus(function(){
        var self = $(this);
        if (self.val() == self.attr('placeholder')) {
            self.val('');
        }
    }).blur(function(){
        var self = $(this),
            value = $.trim(self.val());
        if(val == '') {
            self.val(self.attr('placeholder');
        }
    });
}

<input type="text" name="desc" placeholder="My Email Account">