Dies erfolgt automatisch für jeden Browser außer Chrome .
Ich vermute, ich muss gezielt auf Chrome zielen.
Irgendwelche Lösungen?
Wenn nicht mitCSS, dann mit jQuery ?
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
Firefox 15 und IE 10+ unterstützt dies jetzt ebenfalls. Um Casey Chus CSS Lösung zu erweitern:
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;
}
hast du den Platzhalter attr ausprobiert?
<input id ="myID" type="text" placeholder="enter your text " />
-BEARBEITEN-
Ich sehe, probiere es dann aus:
$(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 sollte Platzhalter verwendet werden, um den Wert zu beschreiben, nicht den Namen der Eingabe. Ich schlage 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:
Aufbauend auf den Antworten von @Hexodus und @Casey Chu, handelt es sich hier um eine aktualisierte und browserübergreifende Lösung, die CSS-Opazität und Übergänge nutzt, um den Platzhaltertext auszublenden. Es funktioniert für jedes Element, das Platzhalter verwenden kann, einschließlich textarea
- und input
-Tags.
::-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.
Um die Antwort von @ casey-chu und pirate rob zu erweitern, finden Sie hier einen mehr Cross-Browser-kompatiblen Weg:
/* 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 lieber die Variable ID
fallen lassen und explizit input
verwenden, damit alle Eingaben mit placeholder
das Verhalten erhalten:
<input type="text" placeholder="your text" />
Beachten Sie, dass $(function(){ });
die Abkürzung für $(document).ready(function(){ });
ist:
$(function(){
$('input').data('holder',$('input').attr('placeholder'));
$('input').focusin(function(){
$(this).attr('placeholder','');
});
$('input').focusout(function(){
$(this).attr('placeholder',$(this).data('holder'));
});
})
Ich packe dies gerne in den Namensraum ein und führe Elemente mit dem Attribut "Platzhalter" aus ...
$("[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 SieSPEZIFIT&AUML;T, um sicherzustellen, dass Ihre Stile mit dem stärksten Faktor angewendet werden. id
Vielen Dank für @Rob Fletcher für seine großartige Antwort, die wir in unserem Unternehmen verwendet haben
Erwägen Sie daher, dass Sie Stile hinzufügen, 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;
}
Um die Codebeispiele 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.
Bei Verwendung von SCSS zusammen mit http://bourbon.io/ ist diese Lösung einfach und elegant und funktioniert mit allen Webbrowsern:
input:focus {
@include placeholder() {
color: transparent;
}
}
Verwenden Sie Bourbon! Es ist gut für dich !
Ich mag den CSS-Ansatz, der mit Übergängen gewürzt ist. Bei Fokus wird der Platzhalter ausgeblendet;) Funktioniert auch für Textbereiche.
Danke @Casey Chu für die großartige 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 Pure CSS hat es für mich funktioniert. Machen Sie es transparent, wenn Sie eingegeben werden/Fokus bei der Eingabe
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;
}
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 Browserherstellern unterstützt.
Referenz: Platzhaltertext mit CSS ausblenden von Ilia Raiskin.
Dieses Stück CSS hat für mich gearbeitet:
input:focus::-webkit-input-placeholder {
color:transparent;
}
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);
};
});
});
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');
});
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; }
Demo ist hier: 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'));
});
});
}
$("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");
});
});
$("input[placeholder]").focusin(function () {
$(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
$(this).attr('placeholder', $(this).data('place-holder-text'));
});
Abgesehen davon habe ich zwei Ideen.
Sie können ein Element hinzufügen, das den Palceholder imitiert. Mit JavaScript steuern Sie, ob das Element ein- und ausgeblendet wird.
Aber es ist so komplex, dass die andere den Selektor des Bruders von css benutzt. Nur 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.
Keine Notwendigkeit, CSS oder JQuery zu verwenden. Sie können dies direkt aus dem HTML-Eingabe-Tag tun.
Zum Beispiel , In der E-Mail-Box unten wird der Platzhaltertext nach dem Anklicken von innen ausgeblendet, und der Text wird erneut angezeigt, wenn er außerhalb angeklickt wird.
<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; }
probiere diese Funktion:
+ Versteckt den PlaceHolder im Fokus und gibt ihn auf Unschärfe zurück
+ Diese Funktion hängt von der Platzhalterauswahl ab. Sie wählt zunächst die Elemente mit dem Platzhalterattribut aus, löst eine Funktion beim Fokussieren und eine weitere beim Verwischen aus.
on focus: fügt dem Element ein Attribut "data-text" hinzu, das seinen Wert vom Platzhalterattribut erhält, und entfernt dann den Wert des Platzhalterattributs.
on blur: gibt den Platzhalterwert zurück und entfernt ihn aus dem Datentextattribut
<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 durch Eingabe des Eingabeelements nachsehen, was hinter den Kulissen passiert
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 für das eingabefeld verwendet (ich verwende prime ng autocomplete).
Der obige Platzhalter wird in TypeScript festgelegt
Zwei Funktionen, die ich verwende -
/* 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;
}