<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />Ersetzen Sie "value" durch den Standardwert. Wenn das Feld ausgewählt wird, verschwindet der Standardwert. Wenn der Benutzer den Feldwert zuvor geändert hat, wird er unverändert gelassen.
Alternativ verwenden Sie onfocus=”this.value=”;”, um das Feld immer zu leeren.
Was ist mit ONBLUR auch? Nur für den Fall, dass der Benutzer nichts eingibt und das Feld verlässt.
function clearText(field){
if(field.defaultValue == field.value){
field.value = “”;
}
else if(field.value == “”){
field.value = field.defaultValue;
}
}
Wenn wir viele Eingaben, Textbereiche haben. Es funktioniert sowohl bei Fokussierung als auch beim Verlassen des Feldes.
Als;
Kommentarbereich
Es ist sehr einfach. Wir definieren nur ein Skript und legen es in den Kopfbereich.
Entschuldigung, mein Code wurde nicht angezeigt. Ich versuche es noch einmal...
Was ist, wenn das Feld mit einer Tabelle verbunden ist und das Eingabefeld vordefiniert ist?
Beispiel: Ich habe ein Feld "S", das auf einer Webseite leer erscheint, der Benutzer macht einen Fehler und anstatt zurückzugehen und es hervorzuheben und zu löschen, könnte er einfach auf die Reset-Schaltfläche klicken. Wenn ich input type="text" verwende, wird nur ein weiteres leeres Feld erstellt. Ich möchte, dass es sich auf das vordefinierte Feld bezieht.
Vielen Dank dafür. Ich weiß, es ist ein sehr einfacher Befehl zum Hinzufügen, aber ich habe mich gefragt, warum er nicht funktionierte. Ich habe einfach Ihren kopiert und eingefügt und siehe da, keine Probleme!
Ich habe auch das
onblur=”if(this.value == ”) { this.value = ”; }” value=”value”
verwendet, damit es zum Original zurückkehrt, wenn nichts eingegeben wird!
@mgpwr
Danke für den Zusatz Sheffield! ... Ich habe Ihren "onblur"-Code dort eingefügt und festgestellt, dass er bei mir nicht funktioniert hat ... aber dann habe ich bemerkt, dass die "geschweiften Klammern" angepasst werden mussten, damit er bei mir funktioniert
onblur=”if(this.value == ”) { this.value = ‘value’; }” value=”value”
@Jamie – Sheffields Zeile hat nur einen kleinen Tippfehler. Er hatte ein doppeltes Anführungszeichen, wo eigentlich ein einzelnes Anführungszeichen sein sollte.
Mach das
Anstatt diesem
Entschuldigen Sie, wenn ich sehr amateurhaft klinge...
Aber... ich scheine das nicht zum Laufen zu bringen. Ich habe ein PHP-Formular, das PHP ist auf der Seite... und ich weiß nicht, warum es nicht funktioniert.
Muss ich das tun?
Ich wäre dankbar, wenn mir jemand helfen würde.
Entschuldigung, dass ich so ein Amateur bin :)
Ich weiß nicht, wie ich Code in diesen Beitrag einfügen kann...
Ich meinte eigentlich
Script type=””
/script
Aber mit
Hat mir den Hintern gerettet!
Vielen Dank dafür! Sehr nützlich. :)
Um generischer zu sein, à la jquery
var el = $(“input[type=text], textarea”);
el.focus(function(e) {
if ($(this).value == $(this).defaultValue)
$(this).value = “”;
});
el.blur(function(e) {
if ($(this).value == “”)
$(this).value = $(this).defaultValue;
});
Endlich beide zum Laufen gebracht. Onblur und onFocus. Danke Chris!
Eigentlich, zumindest für jQuery 1.6.2. sollte der generische Schnipsel so aussehen
Oder wenn Sie $(this) verwenden möchten, sollte es $(this)[0] sein, aber das sieht hässlich aus.
Ich habe mein Skript für Eingabetexte durcheinander gebracht, aber Ihres hier war sehr hilfreich. Danke!
Danke, das ist sauber und einfach.
Frage – Wie setzt man onblur so, dass der Wert bleibt oder wieder im Feld erscheint, wenn der Benutzer nichts eingibt? ~ danke
Das ist der Code, den ich verwende, er tut genau das, was Sie fragen
input type=”text” value=”Vorname” name=”fname” class=”text_field” onfocus=”if (this.value == ‘Vorname’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Vorname’;}”
Für Textbereiche....
textarea name=”nachricht” class=”text_area” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;” cols=”72″ rows=”11″>Geben Sie Ihre Nachricht hier ein…
Entschuldigung für die fehlenden Klammern, ich weiß nicht, wie ich hier Code einfügen kann.
Du rockst! ~ Danke
Für das Protokoll, das ist der Code/die Syntax, die ich verwende
<input type=”text” name=”Suche” class=”searchbox” onfocus=”if(this.value == ‘Suche Künstler’) { this.value = ”; }” onblur=”this.value=!this.value?’Suche Künstler’:this.value;” value=”Suche Künstler” />
Funktioniert super!
Danke. Sehr hilfreich.!
funktioniert das bei Formularfeldern? Ich habe derzeit das Feld onfocus=”cl(this) – funktioniert zum Entfernen des Textes, aber nicht zum Hinzufügen zurück
wie kann man den Standardwert in grauer Farbe einfärben??
Danke, das ist nützliches Zeug!!!
Ich benutze das in meinem Formular
input name=”beispiel” type=”text” id=”beispiel” value=”beispiel” onFocus=”if(this.value == ‘beispiel’) {this.value = ”;}” onBlur=”if (this.value == ”) {this.value = ‘beispiel’;}”
... was mache ich, damit dieses "beispiel: beispiel" nicht an den Empfänger gesendet wird, wenn es nicht ausgefüllt ist?
Vielen Dank für all diese nützliche Hilfe!
(neu dabei)
function change(i){
if(i.value == ”){ i.value = ‘Suche…’;
}
function change2(i){
if(i.value == ‘Suche…’){ i.value = ”;
}
Das ist meine Version und sie ist so einfach und schön
Es sieht sehr sauber und logisch aus, aber wo platziere ich es? Ich habe eine CCS-Kontaktseite,
und ich kann keines zum Laufen bringen.
Ich möchte nur, dass die Namen: "Name, E-Mail und Inhalt grau in den Feldern erscheinen, aber aus irgendeinem Grund funktionieren keine der Beispiele.
Das ist mein HTML
Name:
E-Mail:
Kommentare
Das ist mein CSS
form {
/*margin: 20px 0 0 40px;*/
font-family: Verdana;
font-style : normal ;
font-size : 0.865em;
font-weight :550;
text-align : left;
color: #000000}
input { margin: 4px;
max-width: 100% }
textarea {
max-width: 100%
}
Wow, das war genau das, was ich gesucht habe. Es hat perfekt für mich funktioniert!
Danke!
kann man ein anderes Element wie div oder ul ändern, wenn man sich auf eine Textbox konzentriert?
Ich möchte die Breite meiner li ändern, wenn ich mich auf meine Textbox konzentriere
Startseite
Über
Kontakt <—Breite ändern
<– wenn das fokussiert ist
gute Sache. Aber ich möchte etwas wie Ihr Kontaktformular machen. Wenn jemand nicht in der Textbox ist, sollte ein Wasserzeichenbild angezeigt werden, wenn wir Text eingeben, verschwindet das Bild. Aber wenn jemand die Textbox leer lässt, kommt das Wasserzeichen zurück. ?
Verwenden Sie JavaScript für Wasserzeichen.
Es funktioniert onfocus und onblur.
Sie sollten Ihren Standardstring nur im "name"-Attribut behalten.
Ich habe jQuery nur verwendet, um die Elemente oder Attribute zu erhalten, aber Sie können auch Standardtechniken wie "getElementBy***" verwenden.
$(‘input’).focus(function(){
if($(this).val()==$(this).attr(“name”)){
$(this).val(“”);
$(this).css(“color”,”#141310″);
}
$(this).blur(function(){
if($(this).val()==””){
$(this).val($(this).attr(“name”));
$(this).css(“color”,”#9A9A9A”);
}
});
});
Danke @Artem. Habe es gestern herausgefunden, verwende dasselbe und habe es in der oberen Leiste der Website implementiert.
http://www.udaipurtimes.com
Danke für die Antwort, Kumpel. :)
Hallo
Ich möchte das auf einem Formular tun, das vom Webform-Modul von Drupal7 erstellt wurde. Da es vom Modul erstellt wird, kann ich die jscript-Tags von onblur oder onfocus nicht zu den Textfeldern hinzufügen. Die Website ist nicht online, daher kann ich die URL nicht hier posten.
Bitte helfen Sie mir, wie ich das tun kann. Wenn dies mit PHP möglich ist, wäre das auch in Ordnung, da ich die main_template.php-Datei habe. Aber ich würde jQuery bevorzugen.
danke
ich brauche Hilfe
wenn der Benutzer eine Zahl in eine Box eingibt, dann wird eine andere Box fokussiert, wie mache ich das?
Hallo,
Das ist großartig, danke! Eine Frage jedoch. . . Die Standardwerte werden bei der Formularvalidierung übergeben (das Formular kann mit den Standardwerten gesendet werden). . . Gibt es einen String, der angehängt werden kann, damit Validatoren dies nicht als Benutzereingabe erkennen?
KW
Warum verwenden Sie nicht das Attribut placeholder? z.B. <br/>
<br/>
< input placeholder=”Hallo Welt!” />
<br/>
<br/>
Dies setzt den Text zwischen den Anführungszeichen in das Eingabefeld, solange der Benutzer nichts eingegeben hat. Sobald er zu tippen beginnt, verschwindet der Text (daher placeholder).
Hinweis: Wenn Sie das Feld bei Fokussierung immer leeren möchten (nicht nur, bevor der Benutzer bereits etwas eingegeben hat), funktioniert die vorgeschlagene Lösung möglicherweise besser.
placeholder= funktioniert gut, ist aber nicht browserübergreifend kompatibel.
Danke, war sehr hilfreich!
Paul Clapp, es ist 2013, 'placeholder' funktioniert in fast allen Browsern und Mobilgeräten.
Evan, "placeholder" funktioniert nicht im Internet Explorer... (ich weiß nicht, warum Leute ihn immer noch benutzen!)
Ich habe es geschafft, mein Opt-in-Formular damit auszustatten, ich bin so stolz! Ohne diesen Tipp hätte ich es nicht geschafft, vielen Dank!
Hallo!
Ich benutze ein eingebettetes Formular, daher habe ich keinen Zugriff auf das HTML.
Ich versuche, den CSS-Code oben anzupassen, um meine Formularfelder zu leeren.
Hier ist ein Beispiel für meinen HTML-Code für eine einzelne Zeile.... Kann mir bitte jemand mit dem CSS-Code helfen?
Viel Dank,
JK
Mein Code wurde aus irgendeinem Grund nicht übernommen: Vielleicht lasse ich die „<“ weg
input type=”text” class=”hs-input” required=”required” name=”state” value=”state”
Ich habe einen Mini-Warenkorb oben rechts auf meiner Seite. Nachdem Kunden die gewünschten Artikel von der Seite ausgewählt haben (es können viele Auswahlen sein), werden die Artikel an den Mini-Warenkorb übergeben, aber das Formular wird nicht geleert. Ich habe zahlreiche Java-Skripte ausprobiert, um die Eingabefelder zurückzusetzen, aber keines scheint zu funktionieren. Es wurde vorgeschlagen, dass ein anderes Skript stört, aber ich habe keine Skriptfehler auf der Seite. Das einzige Skript für den Mini-Warenkorb ist ein window.focus(). Könnte das das Problem sein?
Nachdem ich die Beiträge hier in den Schnipseln gelesen hatte, habe ich Folgendes zusammengestellt, das großartig funktioniert. In meinem Fall verwende ich es für ein einfaches Suchfeld.
<input type="text" onfocus="if(this.value == 'Diese Seite durchsuchen') { this.value = ''; }" class="form-control" onBlur="if(this.value == '') { this.value = 'Diese Seite durchsuchen'; }" value="Diese Seite durchsuchen">Am Anfang bin ich ein Anfänger im Website-Bau und ALL meine Arbeit basiert auf Hilfe von Leuten und Foren wie Ihnen!
Ich verwende seit einiger Zeit die folgende Funktion für meine Webformulare
onfocus=”if(this.value==defaultValue) {this.value=”;}” onblur=”if(this.value==”) {this.value=defaultValue}”
Das Problem ist, dass die Formularfelder mit den Standardwerten validiert werden, z.B. wenn das Feld mit "Name" gefüllt ist, kann der Besucher fortfahren, ohne seinen Namen in das Formularfeld einzugeben, obwohl es ein Pflichtfeld ist. (Sie können es auf dem Kontaktformular auf der Homepage von http://www.kaamwaala.com überprüfen).
Kann mir jemand bitte bei der Validierung helfen, indem er notwendige Änderungen im HTML-Code vorschlägt, den ich verwende.
Danke... Sie wären hier ein Lebensretter!
Hallo, ich versuche, das in einer Funktion zu tun, aber es funktioniert nicht richtig.
function prüfe_inhalt() {if (check()) {
alert ("Keine gleichen Zahlen erlaubt. Bitte geben Sie eine andere Zahl ein.");
this.value ='';
}
}
Jetzt habe ich ein
Es scheint, dass "this" nicht mehr auf das Eingabefeld verweist ...
letzter Versuch
input type text value leer onblurprüfe_inhalt
zum Leeren beim Fokussieren und Wiedereinsetzen des Werts, wenn nichts eingegeben wird beim Verlassen des Feldes
value=”Vorname” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”
Gerade getestet und das funktioniert. Sehr hilfreich, danke fürs Teilen.
wie benutzt man diese Methode, wenn mein Input serverseitig ist?
wie benutzt man diese Methode, wenn mein Input serverseitig ist?.
weil ich den Wert der Textbox im Code-Behind erhalten möchte.
clearText = function(field){
field.value = ”;
field.onfocus = function() {};
}
und
onfocus=’clearText(this);’
entfernt nur die erste Initialisierung (einfach)!
Ja, toll mit onblur bei einem Opt-in-Formular. Danke.
Das Feld beim Fokussieren niemals leeren! Es macht es unmöglich, einen Rechtschreibfehler zu korrigieren, sobald das Feld ausgeblendet wurde, ohne alles neu zu schreiben. Wählen Sie stattdessen beim Fokussieren alles aus und der Benutzer kann wählen, ob er nur tippt und den Inhalt ersetzt oder die Auswahl ändert und nur Teile davon bearbeitet.
Wählen Sie auch niemals das gesamte Feld per Klick aus. Es verhindert, dass Benutzer innerhalb des Feldes auswählen. Wenn Sie den gesamten Text auswählen möchten, tun Sie dies beim Fokussieren.
Ich bin Abonnent des Wufoo-Formulars. Ich habe ein Formular erstellt und einen vordefinierten Wert hinzugefügt. Wenn ich auf das Feld klicke, bleibt der Text bestehen und muss mit der Rücklichttaste gelöscht werden. Gibt es eine Möglichkeit, ihn mit CSS zu löschen oder ein Skript zum Formular hinzuzufügen?
Danke
diese Dinge in seine eigenen Hände nehmen, da sie hoffen, CSS
Falls wir kein JavaScript verwenden wollen
notwendig
Ich brauchte ein Eingabefeld mit einem Textwert von N/A darin (kein Platzhalter), das das N/A löscht und es einem Benutzer erlaubt, alles einzugeben, was er möchte, aber das N/A wieder einfügt, wenn er beschließt, etwas von dem Geschriebenen zu löschen. Unter Verwendung einiger der obigen Antworten und eines Teils meiner eigenen funktioniert dies perfekt für mich
onFocus="value=''" onblur="this.value=!this.value?'N/A':this.value;" value="N/A"was ist, wenn die Eingabe ein Datum und keine Textfeld ist?