Dies erfolgt automatisch für jeden Browser außer Chrome .

Ich schätze, ich muss speziell auf Chrome abzielen .

Irgendwelche Lösungen?

Wenn nicht mit CSS , dann mit jQuery ?

Mit freundlichen Grüßen.

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

Bearbeiten: Alle Browser unterstützen jetzt

input:focus::placeholder {
  color: transparent;
}

<input type="text" placeholder="Type something here!">

Firefox 15 und IE 10+ unterstützen dies jetzt ebenfalls. So erweitern Sie die CSS- Lösung von Casey Chu :

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Hier ist eine reine CSS-Lösung (funktioniert derzeit nur in WebKit):

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

Reine CSS-Lösung (kein JS erforderlich)

Aufbauend auf den Antworten von @Hexodus und @Casey Chu finden Sie hier eine aktualisierte und browserübergreifende Lösung, die CSS-Deckkraft und Übergänge nutzt, um den Platzhaltertext auszublenden. Es funktioniert für jedes Element, das Platzhalter verwenden kann, einschließlich textareaund inputTags.

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

Bearbeiten: Aktualisiert, um moderne Browser zu unterstützen.

Haben Sie versucht, Platzhalter attr?

<input id ="myID" type="text" placeholder="enter your text " />

-BEARBEITEN-

Ich verstehe, versuche das dann:

$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});

Test: http://jsfiddle.net/mPLFf/4/

-BEARBEITEN-

Eigentlich, da Platzhalter verwendet werden sollten, um den Wert zu beschreiben, nicht den Namen der Eingabe. Ich schlage die folgende Alternative vor

html:

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

Javascript:

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});

CSS:

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}

Prüfung:

http://jsfiddle.net/kwynwrcf/

Um die Antwort von @ casey-chu und Pirate Rob zu erweitern, gibt es eine browserübergreifendere Methode:

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

Tonis Antwort ist gut, aber ich würde das lieber fallen lassen IDund explizit verwenden input, damit alle Eingaben mit placeholderdem Verhalten erhalten:

<input type="text" placeholder="your text" />

Beachten Sie, dass dies $(function(){ });die Abkürzung für $(document).ready(function(){ });:

$(function(){
    $('input').data('holder',$('input').attr('placeholder'));
    $('input').focusin(function(){
        $(this).attr('placeholder','');
    });
    $('input').focusout(function(){
        $(this).attr('placeholder',$(this).data('holder'));
    });
})

Demo.

Ich mag es, dies im Namensraum zu verpacken und auf Elementen mit dem Attribut "Platzhalter" auszuführen ...

$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};

Manchmal benötigen Sie SPEZIFIZITÄT , um sicherzustellen, dass Ihre Stile mit dem stärksten Faktor angewendet werden. idVielen Dank an @Rob Fletcher für seine großartige Antwort, die wir in unserem Unternehmen verwendet haben

Fügen Sie daher Stile hinzu, denen die ID des App-Containers vorangestellt ist

    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }

Mit Pure CSS hat es bei mir funktioniert. Machen Sie es transparent, wenn Sie Eingaben / Schwerpunkte eingeben

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }

Um das Codebeispiel von Wallace Sidhrée weiter zu verfeinern :

$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})

Dadurch wird sichergestellt, dass jede Eingabe den richtigen Platzhaltertext im Datenattribut speichert.

Ein funktionierendes Beispiel finden Sie hier in jsFiddle .

Ich mag den CSS-Ansatz, gewürzt mit Übergängen. Bei Fokus wird der Platzhalter ausgeblendet;) Funktioniert auch für Textbereiche.

Danke @Casey Chu für die tolle Idee.

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}

Mit SCSS zusammen mit http://bourbon.io/ ist diese Lösung einfach, elegant und funktioniert in allen Webbrowsern:

input:focus {
  @include placeholder() {
    color: transparent;
  }
}

Verwenden Sie Bourbon! Es ist gut für dich !

Dieses Stück CSS hat für mich funktioniert:

input:focus::-webkit-input-placeholder {
        color:transparent;

}

Für eine reine CSS-basierte Lösung:

input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}

Hinweis: Wird noch nicht von allen Browser-Anbietern unterstützt.

Referenz: Platzhaltertext mit CSS von Ilia Raiskin im Fokus ausblenden .

HTML:

<input type="text" name="name" placeholder="enter your text" id="myInput" />

jQuery:

$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});

2018> JQUERY v.3.3 LÖSUNG: Globales Arbeiten für alle Eingaben, Textbereich mit Platzhalter.

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});

Demo ist da: jsfiddle

Versuche dies :

//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });

        });

}

zur Eingabe

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

für Textbereich

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }

$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

$("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");
    });
});

Neben all dem habe ich zwei Ideen.

Sie können ein Element hinzufügen, das den Palceholder imitiert. Verwenden Sie dann mithilfe von Javascript das Element, das angezeigt und ausgeblendet wird.

Aber es ist so komplex, dass der andere den CSS-Selektor des Bruders verwendet. Genau so:

.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; } 

23333, ich habe ein schlechtes Englisch. Hoffentlich lösen Sie Ihr Problem.

Versuchen Sie diese Funktion:

+ Der PlaceHolder wird im Fokus ausgeblendet und bei Unschärfe wieder angezeigt

+ Diese Funktion hängt von der Platzhalterauswahl ab. Zuerst werden die Elemente mit dem Platzhalterattribut ausgewählt, eine Funktion zum Fokussieren und eine weitere Funktion zum Verwischen ausgelöst.

im Fokus: Es fügt dem Element ein Attribut "Datentext" hinzu, das seinen Wert aus dem Platzhalterattribut erhält, und entfernt dann den Wert des Platzhalterattributs.

bei Unschärfe: Der Platzhalterwert wird zurückgegeben und aus dem Datentextattribut entfernt

<input type="text" placeholder="Username" />

$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});

Sie können mir sehr gut folgen, wenn Sie sehen, was hinter den Kulissen passiert, indem Sie das Eingabeelement untersuchen

Das gleiche habe ich in Winkel 5 angewendet.

Ich habe eine neue Zeichenfolge zum Speichern von Platzhaltern erstellt

newPlaceholder:string;

dann habe ich Fokus- und Unschärfefunktionen auf dem Eingabefeld verwendet (ich verwende Prime ng Autocomplete).

Der obige Platzhalter wird aus dem Typoskript festgelegt

Zwei Funktionen, die ich benutze -

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}

Sie müssen kein CSS oder JQuery verwenden. Sie können dies direkt über das HTML-Eingabe-Tag tun.

Beispiel : Im unteren E-Mail-Feld verschwindet der Platzhaltertext nach dem Klicken nach innen und der Text wird erneut angezeigt, wenn Sie nach außen klicken.

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }