[Erledigt] Div-Box ausblenden, wenn klick nicht in Div-Box und Inputfeld

PsychoEagle · 18.08.2008, 16:11

Tach nochmal,

Hintergrund:

Habe mir einen kleinen AutoCompleter gebastelt. Hierzu habe ich ein Eingabefeld, und darunter dann eine Div-Box, welche dynamisch mit den gefundenen Werten gefüllt wird.

Code:

      <input type="text" id="where" name="where_inp" autocomplete="off" style="width:300px;" onkeyup="loadWhere();" />            
      <div id="where_div" class="autocomplete"></div>

Hierbei habe ich eine Problematik, wo ich irgendwie nicht zu einer Lösung komme und hoffe ihr habt Anregungen oder könnt mich auf die richtige Bahn bringen.

Ich möchte die eingeblendete Div-Box ausblenden, wenn man ausserhalb der Div-Box oder des Input-Feldes klickt. Drum dacht ich, ich mach ein onblur="hideMyBox();" in mein Textfeld.

Da hab ich aber das Problem, wenn ich meinen Fund in der Div-Box auswähle (also Klicke), geht er ja vorher aus dem Textfeld, und so greift der Eventhandler onblur und macht meine Box weg, bevor der ausgewählte Wert in das Input-Feld übertragen werden konnte.

Weiss jemand, wie ich das umgehen kann? Kann ich irgendwie herausfinden, in welchem HTML-Element geklickt wurde?

Denn wie gesagt, die Box soll nur ausgeblendet werden (display=none), wenn man ausserhalb des Inputfeldes bzw. der Box klickt.

Ich möchte ungern jedes andere HTML-Element auf meiner Seite ein onclick="hideMyBox();" erweitern. Oder geht sowas dynamisch? Wäre bestimmt dann auch sehr unschön

Danke für eure Hilfe

ich weiss nicht weiter und finde keine hilfreichen Lösungen (oder sonst irgendeine Richtung, die ich einschlagen könnte

)

Grüße
Das Psy

agrajag · 18.08.2008, 16:58

Wenn du sowieso schon Prototype verwendest, warum nimmst du dann nicht einfach einen der fertigen "Autocompleter". Z.b. diesen von script.aculo.us:
script.aculo.us - web 2.0 javascript demos

Wenn du das nicht möchtest kannst du dort immernoch nachschauen, wie die das gelöst haben

Montellese · 18.08.2008, 17:49

Falls du das Script selber fertig schreiben willst:

Über das Event Object kannst du auf das Ursprungs-Element des Events schliessen.
Im IE ist das

Code:

window.event.srcElement

und in Gecko-Browsern

Code:

event.target

. Damit das ganze in den Gecko-Browsern funktioniert, musst du natürlich das Event Object mit an die Funktion übergeben, wo der click verwertet wird.
Dort arbeitest du dich dann halt durch den DOM Baum nach oben (parentNode) und überprüfst, ob eines der Elternelemente dein DIV ist (ID-Vergleich oder Node-Vergleich). Wenn ja, dann wurde auf einen der Vorschläge im AutoCompleter geklickt.

PsychoEagle · 19.08.2008, 12:20

Zitat:

Zitat von agrajag

Wenn du sowieso schon Prototype verwendest, warum nimmst du dann nicht einfach einen der fertigen "Autocompleter". Z.b. diesen von script.aculo.us:
script.aculo.us - web 2.0 javascript demos

Wenn du das nicht möchtest kannst du dort immernoch nachschauen, wie die das gelöst haben

Den hatte ich auch schon im Blick, aber der Projektleiter wollte, dass ich den Autocompleter selber erstelle (wahrscheinlich, damit ich in JS fitter werde *g*).

Aber dass ich darauf nicht selber kam, da mal nachzuschauen, werd ich nachholen

Danke für den Hinweis @ Montellese, werd ich mir gleich mal heut Nachmittag anschauen, genauso wie den Tip von agrajag.

Also danke euch beiden, ich berichte neues (und wenn Lösung vorhanden, diese selbstverständlich auch)

Grüße
Das Psy

PsychoEagle · 19.08.2008, 15:16

Folgende Lösung habe ich jetzt mal

Code:

[...]
    <script type="text/javascript">   
      function hideACWhere(e) {
        var eve = e.target ? e.target : e.srcElement;          
        if(eve.parentNode.parentNode == null || eve.parentNode.parentNode.id != 'where_div') {                    
          $('where_div').style.display = 'none';  
        }
      }  
    </script>  
  </head>
  <body onclick="hideACWhere(event)">
[...]

Scheint gut zu klappen

Grüße

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JS-Tooltip ausblenden	Freeaak	JavaScript, Ajax und mehr	2	07.08.2008 13:14
[Erledigt] Zeigen Und verstecken durch ein Klick	errox	JavaScript, Ajax und mehr	12	07.06.2008 19:22
input inhalt bei klick ändern	jar3d	HTML, Usability und Barrierefreiheit	3	10.01.2008 16:33
Mehrere div's mit gleichen ID anzeigen / ausblenden	phpbeginner	HTML, Usability und Barrierefreiheit	9	06.09.2007 02:48
JS: Mit einen Link boxen sichtbar und unsichtbar durch klick	scooter	Beitragsarchiv	3	11.03.2006 19:34
Layer ein- und ausblenden	GN	HTML, Usability und Barrierefreiheit	2	24.08.2005 23:28
Bildwechsel beim Klick		HTML, Usability und Barrierefreiheit	1	12.07.2005 23:49
[Erledigt] durch Klick auf Text anderen Text einblenden		HTML, Usability und Barrierefreiheit	3	03.07.2005 14:41
Text per Klick in Textarea einfügen Abhängig von Radiobutton	18inch	HTML, Usability und Barrierefreiheit	1	09.05.2005 11:22
Auf den Klick in eine Checkbox reagieren	workaholic	HTML, Usability und Barrierefreiheit	1	21.03.2005 15:34
Text in Input per Klick hinzufügen, bei erneutem Klick lösch	18inch	HTML, Usability und Barrierefreiheit	2	05.03.2005 14:01
inputfeld soll integer sein		PHP Tipps 2005	9	17.01.2005 17:10
Fehlerausgabe ausblenden		Datenbanken	2	02.11.2004 12:30
ADCELL Vermarktung zu 75% Pay per Klick Kampagnen		Beitragsarchiv	0	18.10.2004 12:37
SQL Dumb per klick		PHP Tipps 2004	7	23.09.2004 22:16

18.08.2008, 16:11
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	[Erledigt] Div-Box ausblenden, wenn klick nicht in Div-Box und Inputfeld Tach nochmal, Hintergrund: Habe mir einen kleinen AutoCompleter gebastelt. Hierzu habe ich ein Eingabefeld, und darunter dann eine Div-Box, welche dynamisch mit den gefundenen Werten gefüllt wird. Code: <input type="text" id="where" name="where_inp" autocomplete="off" style="width:300px;" onkeyup="loadWhere();" /> <div id="where_div" class="autocomplete"></div> Hierbei habe ich eine Problematik, wo ich irgendwie nicht zu einer Lösung komme und hoffe ihr habt Anregungen oder könnt mich auf die richtige Bahn bringen. Ich möchte die eingeblendete Div-Box ausblenden, wenn man ausserhalb der Div-Box oder des Input-Feldes klickt. Drum dacht ich, ich mach ein onblur="hideMyBox();" in mein Textfeld. Da hab ich aber das Problem, wenn ich meinen Fund in der Div-Box auswähle (also Klicke), geht er ja vorher aus dem Textfeld, und so greift der Eventhandler onblur und macht meine Box weg, bevor der ausgewählte Wert in das Input-Feld übertragen werden konnte. Weiss jemand, wie ich das umgehen kann? Kann ich irgendwie herausfinden, in welchem HTML-Element geklickt wurde? Denn wie gesagt, die Box soll nur ausgeblendet werden (display=none), wenn man ausserhalb des Inputfeldes bzw. der Box klickt. Ich möchte ungern jedes andere HTML-Element auf meiner Seite ein onclick="hideMyBox();" erweitern. Oder geht sowas dynamisch? Wäre bestimmt dann auch sehr unschön Danke für eure Hilfe ich weiss nicht weiter und finde keine hilfreichen Lösungen (oder sonst irgendeine Richtung, die ich einschlagen könnte ) Grüße Das Psy __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

18.08.2008, 16:58
agrajag Moderator Registriert seit: 02.10.2006 Beiträge: 3.820 PHP-Kenntnisse: Fortgeschritten	Wenn du sowieso schon Prototype verwendest, warum nimmst du dann nicht einfach einen der fertigen "Autocompleter". Z.b. diesen von script.aculo.us: script.aculo.us - web 2.0 javascript demos Wenn du das nicht möchtest kannst du dort immernoch nachschauen, wie die das gelöst haben __________________ Today you...Tomorrow me.

18.08.2008, 17:49
Montellese Erfahrener Benutzer Registriert seit: 30.07.2007 Beiträge: 541	Falls du das Script selber fertig schreiben willst: Über das Event Object kannst du auf das Ursprungs-Element des Events schliessen. Im IE ist das Code: window.event.srcElement und in Gecko-Browsern Code: event.target . Damit das ganze in den Gecko-Browsern funktioniert, musst du natürlich das Event Object mit an die Funktion übergeben, wo der click verwertet wird. Dort arbeitest du dich dann halt durch den DOM Baum nach oben (parentNode) und überprüfst, ob eines der Elternelemente dein DIV ist (ID-Vergleich oder Node-Vergleich). Wenn ja, dann wurde auf einen der Vorschläge im AutoCompleter geklickt.

19.08.2008, 15:16
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Folgende Lösung habe ich jetzt mal Code: [...] <script type="text/javascript"> function hideACWhere(e) { var eve = e.target ? e.target : e.srcElement; if(eve.parentNode.parentNode == null \|\| eve.parentNode.parentNode.id != 'where_div') { $('where_div').style.display = 'none'; } } </script> </head> <body onclick="hideACWhere(event)"> [...] Scheint gut zu klappen Grüße __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)