Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    [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
    Stichworte: -
  • #2
    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

    Kommentar

    • #3
      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.

      Kommentar

      • #4
        Zitat von agrajag Beitrag anzeigen
        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

        Kommentar

        • #5
          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

          Kommentar

          Vorherige Weiter
          Lädt...
          X