nicht angemeldet
autmatisches Löschen von inputs bei Fokus
Hallo Forum!
Ich versuche, meinen Eingabefeldern Vorgabewerte zu geben (kein Problem) und dann quasi folgendes Script hineinzubauen:
onfocus="if (this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;"
Hierfür selktiere ich mir erstmal die Elemente und packe die passenden Eventhandler dazu:
if(document.getElementById){
if(typeof(document.getElementById('suchfeld'))!='undefined'){
document.getElementById('suchfeld').onfocus=check('suchfeld', true);
document.getElementById('suchfeld').onblur=check('suchfeld', false);
document.getElementById('suchfeld').value='blah';
}
if(typeof(document.getElementById('KONTO'))!='undefined'){
document.getElementById('KONTO').onfocus=check('KONTO', true);
document.getElementById('KONTO').onblur=check('KONTO', false);
}
}
else if(document.all){
if(document.all['suchfeld']){
document.all['suchfeld'].onfocus=check('suchfeld', true);
document.all['suchfeld'].onblur=check('suchfeld', false);
}
if(document.all['KONTO']){
document.all['KONTO'].onfocus=check('KONTO', true);
document.all['KONTO'].onblur=check('KONTO', false);
}
}
Das dürfte eigentlich auch funktionieren (wenn nicht, bitte sagen ;-)).
Dann meine Funktion Check - hier soll in die Elemente das obige Script eingebaut werden, aber es klappt nicht wie gewünscht, mir sagt die JS-Konsole immer document.getElementById(objekt) has no Properties, obwohl ein alert(typeof(document.getElementById(objekt))); mir object zurückgibt...
function check(objekt, inout){
if(document.getElementById){
if(inout){/*Fokus ist im Eingabefeld*/
if(document.getElementById(objekt).value==document.getElementById(objekt).defaultValue) document.getElementById(objekt).value='';
}
else{
if (document.getElementById(objekt).value=='') document.getElementById(objekt).value=document.getElementById(objekt).defaultValue;
}
}
else if(document.all){
if(inout){/*Fokus ist im Eingabefeld*/
if(document.all[objekt].value==document.all[objekt].defaultValue) document.all[objekt].value='';
}
else{
if (document.all[objekt].value=='') document.all[objekt].value=document.all[objekt].defaultValue;
}
}
}
Live-Demo: http://www.sparkasseiserlohn.de/neu/, JS:http://www.sparkasseiserlohn.de/neu/js/global.js
Danke euch allen!
Gruß
Martin
--
ss:| zu:) ls:# fo:| de:> va:| ch:? n4:° rl:( br:> js:| ie:% fl:| mo:?
http://www.peter.in-berlin.de/projekte/selfcode/?code=ss%3A|+zu%3A)+ls%3A%23+fo%3A|+de%3A>+va%3A|+ch%3A%3F+n4%3A�+rl%3A(+br%3A>+js%3A|+ie%3A%25+fl%3A|+mo%3A%3F
ss:| zu:) ls:# fo:| de:> va:| ch:? n4:° rl:( br:> js:| ie:% fl:| mo:?
http://www.peter.in-berlin.de/projekte/selfcode/?code=ss%3A|+zu%3A)+ls%3A%23+fo%3A|+de%3A>+va%3A|+ch%3A%3F+n4%3A�+rl%3A(+br%3A>+js%3A|+ie%3A%25+fl%3A|+mo%3A%3F
-
Hallo,
if(document.getElementById){
if(typeof(document.getElementById('suchfeld'))!='undefined'){Unsinnige Abfrage. getElementById gibt »null« zurück, wenn kein Element mit der ID suchfeld existiert. Wenn die Methode getElementById nicht funktioniert, erzeugt ein Aufruf einen Fehler.
if (document.getElementById && (suchfeld = document.getElementById('suchfeld'))) {
suchfeld.onfocus = ...document.getElementById('suchfeld').onfocus=check('suchfeld', true);
Du musst eine Funktion (Funktionsobjekt) anhand ihres Namens angeben.
elementobjekt.onevent = funktion;
Du darfst die Funktion an dieser Stelle nicht ausführen. Das tust du aber in dem Moment, und die Funktion gibt kein Function-Objekt zurück, also wird keine Event-Handler-Funktion registriert, sondern die Funktion beim versuchten Zuweisen ausgeführt. Du kannst der Event-Handler-Funktion nicht auf diese Weise Parameter übergeben. Es reicht, dass du suchfeld.onfocus = check; notierst und alles weitere in der Funktion regelst. (Es geht auch anders, aber so geht’s auch. ;))function check(objekt, inout){
Erster Parameter einer Event-Handler-Funktion ist immer das Event-Objekt (außer im MSIE). objekt ist die ID des Elements, bei dem das Ereignis passierte. Die kannst du in der Event-Handler-Funktion über das Event-Objekt abfragen. Das Event-Objekt wird der Funktion wie gesagt als Parameter übergeben, also notierst du z.B. function check (eventobjekt). Im MSIE hingegen kannst du darauf über event bzw. window.event zugreifen. Eine Unterscheidung wie
if (!eventobjekt) eventobjekt = window.event;
sorgt dafür, dass dir in jedem Fall das Eventobjekt in der Variable eventobjekt zur Verfügung steht. Im MSIE greift man über srcElement auf das Elementobjekt zu, bei dem der Event passierte; in anderen Browsern über target. Durch eine solche Unterscheidung hast du auf jeden Fall das Zielelement in der Variable zielelement zur Verfügung:
var zielelement;
if (eventobjekt.srcElement)
zielelement = eventobjekt.srcElement
else
zielelement = eventobjekt.target;if(inout){/*Fokus ist im Eingabefeld*/
Du willst wissen, ob ein focus- oder blur-Event aufgetreten ist. Das steht in eventobjekt.type. Also: if (eventobjekt.type == "focus") ...
if(document.getElementById(objekt).value==document.getElementById(objekt).defaultValue) document.getElementById(objekt).value='';
if (zielelement.value == zielelement.defaultValue)
zielelement.value = "";} else{
if (document.getElementById(objekt).value=='') document.getElementById(objekt).value=document.getElementById(objekt).defaultValue;if (zielelement.value == "")
zielelement.value = zielelement.defaultValue;}
}
else if(document.all){Das kannst du dir dann sparen.
Mathias
-
if(typeof(document.getElementById('suchfeld'))!='undefined'){
Unsinnige Abfrage. getElementById gibt »null« zurück, wenn kein Element mit der ID suchfeld existiert.
Da habe ich mich unpräzise ausgedrückt: Ganz unsinnig ist sie nicht, null vom Typ Null ist natürlich nicht undefined. Deine Abfrage ist aber gleichwertig zu if (document.getElementById('suchfeld')). Denn wenn dieser Funktionsaufruf ein Objekt zurückgibt, ergibt die Bedingung true, wenn er null zurückgibt, ergibt sie false. Du wolltest aber anscheinend gleichzeitig prüfen, ob die Funktion document.getElementById überhaupt zur Verfügung steht. Dazu müsstest du auf document.getElementById bzw. typeof(document.getElementById) != "undefined" prüfen, daher meine Empfehlung.
Wenn die Methode getElementById nicht funktioniert, erzeugt ein Aufruf einen Fehler.
Das sollte lauten: »Wenn die Methode getElementById nicht _existiert_ ...«
Mathias
-
Hi Mathias!
Vielen, vielen Dank, aber leider kann ich nur sagen: "funzt net". Mehr Fehlerbeschreibung kann ich dir nicht geben, es passiert einfach gar nichts, und es gibt auch keine Fehlermeldung.
Habe ich dich denn richtig verstanden?:
if (document.getElementById && (suchfeld = document.getElementById('suchfeld'))) {
suchfeld.onfocus = check;
suchfeld.onblur = check;
}function check (eventobjekt){
if (!eventobjekt) eventobjekt = window.event;
var zielelement;
if (eventobjekt.srcElement){
zielelement = eventobjekt.srcElement
}
else{
zielelement = eventobjekt.target;
}
if (eventobjekt.type == "focus"){
if (zielelement.value == zielelement.defaultValue){
zielelement.value = "";
}
}
else if (eventobjekt.type == "blur"){
if (zielelement.value == ""){
zielelement.value = zielelement.defaultValue;
}
}
}Sorry, aber ich hab noch nie EventHandler dynamisch hinzugefügt :-\
Gruß
Martin
--
ss:| zu:) ls:# fo:| de:> va:| ch:? n4:° rl:( br:> js:| ie:% fl:| mo:?
http://www.peter.in-berlin.de/projekte/selfcode/?code=ss%3A|+zu%3A)+ls%3A%23+fo%3A|+de%3A>+va%3A|+ch%3A%3F+n4%3A�+rl%3A(+br%3A>+js%3A|+ie%3A%25+fl%3A|+mo%3A%3F-
Hi Martin,
Mal ne "Kleinigkeit" nebenbei: Warum verlinkst du eigentlich nicht direkt deinen Selfcode mit @title auf den Decoder? Damit würdest du meinem Browser die horizontale Scrollleiste ersparen ;-))
MfG, Dennis.
--
Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:( mo:} zu:|
Wer die FAQ gelesen hat, ist klüger! ... und weiß wie man Links macht ;-)-
Hi Dennis!
Danke für den Tipp.
Gruß
Martin
-
Hi Martin,
Danke für den Tipp.
Bitte, Mittlerweile kann man ja auch ] in @title durch \ escapen ;-)
MfG, Dennis.
--
Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:( mo:} zu:|
Das Motto des SELFForums ist das _self_made, also das selbermachen. Deshalb sollte man bevor man irgendetwas fragt, immer erst öffentliche Quellen zu Rate ziehen!
-
-
-
Hallo,
Vielen, vielen Dank, aber leider kann ich nur sagen: "funzt net". Mehr Fehlerbeschreibung kann ich dir nicht geben, es passiert einfach gar nichts, und es gibt auch keine Fehlermeldung.
Wenn irgendetwas nicht wie beabsichtigt funktioniert, fügt man an verschiedenen kritischen Stellen im Programm Debug-Ausgaben ein, also z.B. window.alert("[Stelle im Programmablauf]"). Genauso kann man diverse Variablen und Rückgabewerte ausgeben und so prüfen, ob sie korrekte Werte beinhalten. Dadurch findet man Fehler ziemlich schnell. Als Beispiel:
alert("Suche Element mit der ID suchfeld...");
if (document.getElementById && (suchfeld = document.getElementById('suchfeld'))) {
alert("Weise Event-Handler zu...")
suchfeld.onfocus = check;
suchfeld.onblur = check;
}else {
alert("Element mit der ID suchfeld nicht gefunden!\nsuchfeld enthält: " + suchfeld);
}...und dann wärst du darauf gekommen, dass der Anweisungsblock dieser if-Anweisung überhaupt nicht ausgeführt wird. Warum? Weil document.getElementById('suchfeld') null zurückgibt. Warum? Weil zu dem Zeitpunkt, wenn dieses Script ausgeführt wird, das Dokument noch gar nicht vollständig geparst ist. Du kannst die Event-Handler erst zuweisen, wenn das Dokument vollständig geladen wurde und damit der DOM-Elementbaum vollständig erzeugt wurde. Du musst das Script also ausführen, wenn das Ereignis load eintritt, z.B. so:
document.onload = init;
function init () {
/* Weise Event-Handler zu: */
if (document.getElementById && (suchfeld = document.getElementById('suchfeld'))) {
/* usw. */
}
/* Weiterer Code, der nach dem Laden ausgeführt werden muss */
}function check (eventobjekt){
Diese Funktion sollte so korrekt sein.
Mathias
-
Hallo Mathias!
Nochmals vielen Dank für deine Hilfe. Ohne dich hätte ich das so schnell nie lösen können.
Im Opera hat es sofort so funktioniert, wie du es mir gesagt hast, die anderen Browser haben es erst mit
window.onload = init; statt
document.onload = init;gefressen.
Gruß
Martin
-
hi,
Im Opera hat es sofort so funktioniert, wie du es mir gesagt hast, die anderen Browser haben es erst mit
window.onload = init; statt
document.onload = init;
gefressen.kommt darauf an, wo und wie du das script einbaust, und ob es zum ausführungszeitpunkt schon ein document gibt.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-