it-swarm.com.de

So entfernen Sie den Platzhalter im Fokus

Ich habe diese einfache Funktion zum Hinzufügen von Platzhaltern in Browsern erstellt, die dies nicht unterstützen:

DEMO

Die Frage ist: Wie kann ich zu dieser Funktion die Möglichkeit hinzufügen, den Platzhalter zu entfernen, wenn der Benutzer in ihn klickt?

21
FrancescoMussi

Verwenden Sie removeAttr () like,

$('input,textarea').focus(function(){
   $(this).removeAttr('placeholder');
});

Demo

Um den placeholder value erneut auf blur() zu bekommen, probieren Sie das aus,

$('input,textarea').focus(function(){
   $(this).data('placeholder',$(this).attr('placeholder'))
          .attr('placeholder','');
}).blur(function(){
   $(this).attr('placeholder',$(this).data('placeholder'));
});

Demo 1

42
Rohan Kumar

Um dies zu erreichen, müssen Sie keine Javascript-Funktion verwenden. Eine einfachere Lösung ist: 

<input type="text" placeholder="enter your text" onfocus="this.placeholder=''" onblur="this.placeholder='enter your text'" />
26
C_J

CSS hat für mich gearbeitet:

input:focus::-webkit-input-placeholder {
    color: transparent;
}
13
mintedsky

Für Browser, die keinen Platzhalter unterstützen, können Sie Folgendes verwenden: https://github.com/mathiasbynens/jquery-placeholder . Fügen Sie das Platzhalterattribut wie für HTML5 hinzu und rufen Sie dieses Plugin auf: $('[placeholder]').placeholder();. Dann verwenden Sie den Code von Rohan Kumar und werden Browserübergreifend sein. 

0
Rudy

Versuchen Sie diese Hoffnung, es hilft

$('input,textarea').focus(function()
{
$(this).attr('placeholder','');

});
0
Sridhar R
$('input').focus(function()
{
  $(this).attr('placeholder','');

});
0
vikaskimt
$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});
0
hadi

Dies ist meine Lösung bei Klick nicht im Fokus:

$(document).on('click','input',function(){
    var $this = $(this);
    var place_val = $this.attr('placeholder');
    if(place_val != ''){
        $this.data('placeholder',place_val).removeAttr('placeholder');
    }
}).on('blur','input',function(){
    var $this = $(this);
    var place_val = $this.data('placeholder');
    if(place_val != ''){
        $this.attr('placeholder',place_val);
    }
});
0
Nerjuz

Eine sehr einfache und umfassende Lösung dafür ist die, die in Mozilla, IE, Chrome, Opera und Safari funktioniert:

<input type="text" placeholder="your placeholder" onfocus="this.placeholder=''" onblur="this.placeholder='your placeholder'" />
0
Saani
 $('*').focus(function(){
  $(this).attr("placeholder",'');
  });
0
Ankit Tyagi