Du bist nicht angemeldet (anmelden)
Seite 1
(jQuery, Tipp) onfocus, onblur bei Input
Wer kennt sie nicht, die onfocus-onblur-Grütze bei Inputfeldern? Früher hat man sie einfach in den <input>-Tag geschrieben. Z.B. so:
siehe hier
Ich fand das aber für heutige Verhältnisse zuwider und habe eine kleine Erweiterung für jQuery geschrieben, da ich auf Anhieb nichts vergleichbares gefunden habe. Vielleicht hilft das ja dem einen oder anderen weiter. Schöner als die Variante oben ist es allemal.
Diese Erweiterung erwartet als Parameter den Standardwert für das aktuelle Inputfeld. Beim Fokus wird überprüft, ob der aktuelle Wert mit dem übergebenen Wert übereinstimmt. Ist dem so, wird das Feld geleert. Verlässt man das Inputfeld dann wieder, wird gecheckt, ob das Feld leer ist. Wenn ja, wird es wieder mit dem übergebenen Standardwert gefüllt.
Der Aufruf geschieht dann beispielsweise wie folgt:
Ich hoffe, ich konnte einigen damit helfen.
<input id="email" name="email" onblur="if (this.value=='') this.value='E-Mail Adresse'" onfocus="if (this.value=='E-Mail Adresse') this.value='';" type="text" value="E-Mail Adresse" />
siehe hier
Ich fand das aber für heutige Verhältnisse zuwider und habe eine kleine Erweiterung für jQuery geschrieben, da ich auf Anhieb nichts vergleichbares gefunden habe. Vielleicht hilft das ja dem einen oder anderen weiter. Schöner als die Variante oben ist es allemal.
var $j = jQuery;$j.fn.extend({toggleValue : function (defaultText) {return this.each(function() {$j(this).focus(function() {if ($j(this).val() == defaultText) {$j(this).val('');}$j(this).blur(function () {if ($j.trim($j(this).val()) == '') {$j(this).val(defaultText);}});});});}});
Diese Erweiterung erwartet als Parameter den Standardwert für das aktuelle Inputfeld. Beim Fokus wird überprüft, ob der aktuelle Wert mit dem übergebenen Wert übereinstimmt. Ist dem so, wird das Feld geleert. Verlässt man das Inputfeld dann wieder, wird gecheckt, ob das Feld leer ist. Wenn ja, wird es wieder mit dem übergebenen Standardwert gefüllt.
Der Aufruf geschieht dann beispielsweise wie folgt:
<input name="mail" value="E-Mail-Adresse" size="20" /><script type="text/javascript">$j('input').toggleValue('E-Mail-Adresse');</script>
Ich hoffe, ich konnte einigen damit helfen.
Editiert: 17.10.08, 15:03 Uhr
jQuery freifunction toggleInputsValues() {var inputs = document.getElementsByTagName('input');for (var i=0;i<inputs.length;i++) {if (inputs[i].getAttribute('type') == 'text' && inputs[i].getAttribute('value') != '') {inputs[i].default_str = inputs[i].getAttribute('value');inputs[i].onfocus = function() {if (this.getAttribute('value') == this.default_str) {this.setAttribute('value','');}}inputs[i].onblur = function() {if (this.getAttribute('value') == '') {this.setAttribute('value',this.default_str);}}}}}
<input type="text" value="Dein Name" />
So ist das Feld dann auch bei deaktiviertem Javascript gekennzeichnet.
Ich raff's zwar nicht, glaub euch aber, dass das dem Zeitgeist entspricht und werde es dann auch mal verwenden 
Danke!
Danke!
jQuery-variante mit den vorzügen
von timp's nicht-jQuery variante: text-input? + selbstständiges
erkennen/sammeln der value-attribute ...
von timp's nicht-jQuery variante: text-input? + selbstständiges
erkennen/sammeln der value-attribute ...
$('input[type="text"]').each(function(){$(this).toggleValue($(this).val());});
function v(e){y=$(this);D=y.data('v');V=$.trim(y.val());if(!V||V==D)y.val((V==D&&!(e.type=='blur')?true:false)?'':D);}...$(':text,:password').each(function(){$(this).data('v',$(this).val()).bind('focus blur',v);});
Der Eintrag ist zwar schon etwas älter aber ich versuchs trotzdem mal.
Wie verwende ich denn die jQuery-freie Variante von timp am besten? Oder anders gefragt, wie rufe ich die Funktion am besten auf?
Ich hoffe das ist jetzt nicht zu blöd, aber erstens steh' ich manchmal aufm Schlauch, zweitens gibt es keine dummen fragen und drittens Erstens.
Vielleicht erbarmt sich ja jemand. Das wäre toll.
Wie verwende ich denn die jQuery-freie Variante von timp am besten? Oder anders gefragt, wie rufe ich die Funktion am besten auf?
Ich hoffe das ist jetzt nicht zu blöd, aber erstens steh' ich manchmal aufm Schlauch, zweitens gibt es keine dummen fragen und drittens Erstens.
Vielleicht erbarmt sich ja jemand. Das wäre toll.
Du musst die Funktion nur bei einem bestimmten event aufrufen, zum Beispiel wenn das Dokument geladen wurde:
window.onload = toggleInputValues;
Editiert: 06.09.09, 21:35 Uhr
Das ging ja super schnell. Vielen Dank.Hab jetzt folgendes gemacht...
<body onload="toggleInputsValues()">
...was erstmal gut funktioniert.
P.S. timp im 'code' hast du dich verschrieben. Deine Funktion heißt toggleInputsValues
P.P.S. Danke nochmal
Cooler ist es noch, wenn du die Event-Handler nicht im HTML-Code zuweist.
Denn sonst könntest du eigentlich gleich bei der Methode bleiben, die Matze als Beispiel für früher gepostet hat.
Also ist timps Methode noch besser.
Alternativ könntest du auch deine und timps Methode vereinen:
(Obacht, hier stehen keine Klammern hinter dem Namen der Funktion, sie soll ja noch nicht ausgeführt werden.)
Das muss irgendwo in den Skripts, die du einbindest, stehen.
Die Event-Handler so direkt zu füllen hat übrigens Nachteile, denn so kann beim Eintreten des Events nur diese eine Aktion ausgeführt werden. Aber vielleicht brauchst du ja nur die.
Denn sonst könntest du eigentlich gleich bei der Methode bleiben, die Matze als Beispiel für früher gepostet hat.
Also ist timps Methode noch besser.
Alternativ könntest du auch deine und timps Methode vereinen:
document.body.onload = toggleInputsValues;
(Obacht, hier stehen keine Klammern hinter dem Namen der Funktion, sie soll ja noch nicht ausgeführt werden.)
Das muss irgendwo in den Skripts, die du einbindest, stehen.
Die Event-Handler so direkt zu füllen hat übrigens Nachteile, denn so kann beim Eintreten des Events nur diese eine Aktion ausgeführt werden. Aber vielleicht brauchst du ja nur die.
So isses mittlerweile:
@Naboolean: Das mit den Klammern versteh ich nicht.
function init() {toggleInputsValues();}window.onload = init;
@Naboolean: Das mit den Klammern versteh ich nicht.
So isses super!
Wenn du jetzt z.B. schreiben würdest window.onload = init();, würdest du dem Event-Handler den Wert zuweisen, der berechnet wird, wenn init() ausgeführt wird. In dem Fall wäre das glaube ich undefined.
Wenn du die Klammern weg lässt, weist du dem Event-Handler eine Referenz auf die Funktion zu (die ja init »heißt«). Dann ist die onload-Funktion des window-Objekts die selbe, wie die Funktion mit dem Namen init. Wenn dann die onload-Funktion beim Eintreten des Events aufgerufen wird, wird demnach deine definierte Funktion aufgerufen. Und so soll es ja sein.
Wenn du jetzt z.B. schreiben würdest window.onload = init();, würdest du dem Event-Handler den Wert zuweisen, der berechnet wird, wenn init() ausgeführt wird. In dem Fall wäre das glaube ich undefined.
Wenn du die Klammern weg lässt, weist du dem Event-Handler eine Referenz auf die Funktion zu (die ja init »heißt«). Dann ist die onload-Funktion des window-Objekts die selbe, wie die Funktion mit dem Namen init. Wenn dann die onload-Funktion beim Eintreten des Events aufgerufen wird, wird demnach deine definierte Funktion aufgerufen. Und so soll es ja sein.
Der Thread ist zwar schon etwas älter, aber aus aktuellem Anlass hab ich gerade was ähnliches gebastelt, allerdings mit Fading-Effekt. Das ganze benötigt jQuery und eine kleine Anpassung im CSS:
Dazu muss man noch zwei CSS-Klassen definieren, einmal „.input-wrap“ mit „position: relative; display: inline-block;“ und ggf. der Hintergrundfarbe der Input Felder und „.input-wrap .input-text“, welches die selben Eigenschaften wie das Input Feld haben muss.
Zusätzlich dazu wird noch folgendes benötigt
Ein Beispiel gibt es bei jsFiddle, damit man das ganze auch mal in Aktion sieht. Vielleicht wird dann auch etwas klarer, wie genau die CSS Klassen definiert werden müssen.
(function( $ ){$.fn.inputFader = function() {$(this).find('input[type=text][value][class!=no-input-value]').each(function(i, elem) {$(elem).wrap($('<div>').addClass('input-wrap')).closest('.input-wrap').prepend($('<div>').addClass('input-text').text($(elem).val()));$(elem).val('');$(elem).focus(function() {$(this).closest('.input-wrap').find('.input-text').stop(true, true).fadeOut(400);});$(elem).keydown(function() {$(this).closest('.input-wrap').find('.input-text').stop(true, true).hide();});$(elem).blur(function() {if ($(this).val() == '') {$(this).closest('.input-wrap').find('.input-text').stop(true, true).fadeIn(400);}});});};})( jQuery );
Dazu muss man noch zwei CSS-Klassen definieren, einmal „.input-wrap“ mit „position: relative; display: inline-block;“ und ggf. der Hintergrundfarbe der Input Felder und „.input-wrap .input-text“, welches die selben Eigenschaften wie das Input Feld haben muss.
Zusätzlich dazu wird noch folgendes benötigt
.input-wrap .input-text {background: transparent;border-color: transparent;position: absolute;top: 0; left: 0;z-index: 0;}.input-wrap input[type=text] {background: transparent;position: relative;z-index: 1;}
Ein Beispiel gibt es bei jsFiddle, damit man das ganze auch mal in Aktion sieht. Vielleicht wird dann auch etwas klarer, wie genau die CSS Klassen definiert werden müssen.
Placeholder und so. Das hier sieht elegant gelöst aus: http://www.hagenburger.net/BLOG/HTML5-In...Query.html
Editiert: 27.06.11, 18:30 Uhr
Placeholder hatte ich bei mir irgendwie gar nicht mehr auf dem Schirm, nach dem das anfänglich nur von Chrome wirklich unterstützt wurden. Aber mir geht es ja eh in erster Linie um den Fading-Effekt beim auswählen, den bekommt man mit placeholder allein auch nicht hin.Hab das jetzt mal mit placeholder kombiniert, ein Beispiel gibts wieder bei jsFiddle. Damit erübrigt sich dann auch das setzen von class=“no-input-value“.
Hatte auch sowas ähnliches vor, hab aber eine etwas andere Lösung gefunden:
HTML
CSS
JS
jsFiddle
Die Fading-Animation mache ich mit CSS-Transitions. Das Clearen selbst mag ich nicht gerne animiert. Finde ein Feld sollte sofort leer sein, wenn man darauf klickt.
Interessant ist die labelHide Funktion. Es sucht nach den dem Inputfield zugewiesenen Labels und fügt dessen Text als value ein. Man hat somit einen schöneren, zugänglicheren Quellcode, der auch ohne Javascript Sinn ergibt.
Nachteil ist, dass der Labeltext immer identisch mit dem Valuetext sein muss. Man hätte z.B. gerne „URL“ als Label und „http://“ als Value. Schade.
Sehr schön auch, wie Apple das im Checkout z.B. macht. Die Labels werden absolut so positioniert, dass sie über den Inputs liegen und wie Values aussehen. Klickt man dann auf die Labels faden sie aus und man ist im Inputfield fokusiert. Sobald man dann beginnt zu tippen verschwindet der Label/Valuetext.
HTML
<form id="form" method="post"><div><label for="name">Name</label><input type="text" name="name" id="name" /></div><div><label for="email">E-Mail Adresse</label><input type="text" name="email" id="email" /></div><div><label for="url">Domain</label><input type="text" name="url" id="url" /></div><div><label for="message">Ihre Nachricht</label><input type="text" name="message" id="message" /></div></form>
CSS
body { color: #333; font-family: Arial, serif; font-size: 15px; line-height: 1.5; }form { padding: 1em; border: 1px solid #eee; background: #fafafa; }form div { margin-bottom: 1em; }label { display: block; margin-bottom:.2em; font-weight: bold; }input {border:1px solid #ddd;padding:.5em .75em;background-color:#fff;margin:0;font-size: 1em;color: #888;vertical-align:middle;-webkit-box-shadow: inset 0 2px 0 rgba(0,0,0,0.04), 0 1px 0 white;-moz-box-shadow: inset 0 2px 0 rgba(0,0,0,0.04), 0 1px 0 white;box-shadow: inset 0 2px 0 rgba(0,0,0,0.04), 0 1px 0 white;-webkit-transition: background .1s ease-in;-moz-transition: background .1s ease-in;-o-transition: background .1s ease-in;-ms-transition: background .1s ease-in;transition: background .1s ease-in;}input:hover {background-color: #f5f5f5;border: 1px solid #ccc;outline: none;color: black;}input:focus {background-color: #E6EFC2;outline: none;border-color: #C6D880;}
JS
// Hide Labels and Use Them as Values// http://snipplr.com/view.php?codeview&id=15358$.fn.labelHide = function(){return this.each(function(){var current = $(this);var id = current.attr("id");var label = $("label[for='"+id+"']:not(.error)");if (id.length && label.length) {current.val(label.text());label.hide();}});};// Clear Default Input Values// http://snipplr.com/view.php?codeview&id=15360(function($){$.fn.clearDefault = function(){return this.each(function(){var default_value = $(this).val();$(this).focus(function(){if ($(this).val() == default_value) $(this).val("");});$(this).blur(function(){if ($(this).val() == "") $(this).val(default_value);});});};})(jQuery);// Call FunctionsjQuery(document).ready(function() {$('input').labelHide().clearDefault();});
jsFiddle
Die Fading-Animation mache ich mit CSS-Transitions. Das Clearen selbst mag ich nicht gerne animiert. Finde ein Feld sollte sofort leer sein, wenn man darauf klickt.
Interessant ist die labelHide Funktion. Es sucht nach den dem Inputfield zugewiesenen Labels und fügt dessen Text als value ein. Man hat somit einen schöneren, zugänglicheren Quellcode, der auch ohne Javascript Sinn ergibt.
Nachteil ist, dass der Labeltext immer identisch mit dem Valuetext sein muss. Man hätte z.B. gerne „URL“ als Label und „http://“ als Value. Schade.
Sehr schön auch, wie Apple das im Checkout z.B. macht. Die Labels werden absolut so positioniert, dass sie über den Inputs liegen und wie Values aussehen. Klickt man dann auf die Labels faden sie aus und man ist im Inputfield fokusiert. Sobald man dann beginnt zu tippen verschwindet der Label/Valuetext.
Ich mache das auch mit labels. Ist sowieso besser, für form Validation z.b.
http://jsfiddle.net/EVhfm/17/
http://jsfiddle.net/EVhfm/17/
Das mit den Labels ist ein guter Einwand. Hab meins gleich mal modifiziert. Unterstützt jetzt Labels und Placeholder.
Das ganze setzt jetzt wie bei caZpa die Labels über die entsprechenden Input-Felder. Ein placeholder überschreibt immer den Text des labels (dadurch kann man bspw. erreichen, dass im Label zwar „URL“ steht, im Textfeld aber „http://“ ). Sollte kein Label existieren, aber ein Placeholder, wird wie zuvor vorgegangen, nur mit dem Unterschied, dass kein neues div, sondern ein Label mit dem entsprechenden Text gesetzt wird.
http://jsfiddle.net/loeffler/eaDMk/
Das ganze setzt jetzt wie bei caZpa die Labels über die entsprechenden Input-Felder. Ein placeholder überschreibt immer den Text des labels (dadurch kann man bspw. erreichen, dass im Label zwar „URL“ steht, im Textfeld aber „http://“ ). Sollte kein Label existieren, aber ein Placeholder, wird wie zuvor vorgegangen, nur mit dem Unterschied, dass kein neues div, sondern ein Label mit dem entsprechenden Text gesetzt wird.
http://jsfiddle.net/loeffler/eaDMk/
Empfehlung
Du hast nicht die erforderlichen Rechte, Beiträge zu verfassen.
Wenn du dich zum Thema äußern möchtest, kannst du dir hier einen Account zulegen.
Wenn du dich zum Thema äußern möchtest, kannst du dir hier einen Account zulegen.
Suche
Tags
