Ankündigung

Einklappen
Keine Ankündigung bisher.

Zwei input Elemente ausblenden, wenn keines der Beiden mehr Focus hat

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Zwei input Elemente ausblenden, wenn keines der Beiden mehr Focus hat

    Hallo,

    wie geschrieben ich habe ein Formular, mit zwei input Elementen

    HTML-Code:
    <div id="addh">
    <form id="form1" action="/index.php?mother=R.2.35&form=nav_add" method="post" accept-charset="utf-8">
    <input id="tax_class" type="text" name="tax_class" placeholder="tax_class" onfocusout="add_back()"><br>
    <input type="submit" style="display:none">
    </form>
    </div>      
    
    
    <div id="add">
    <input form="form1" type="text" name="taxa" placeholder="taxa" onfocusout="add_back()"><br>
    </div>
    in beiden Input elementen rufe ich die funktion add_back() auf, wen sie den fokus verlieren

    ich will aber natürlich zwischen den input elementen hin und her wechseln können, ohne das diese ausgeblendet werden, nur wenn keines von beiden mehr focus hat sollen sie ausgeblendet werden!

    das hatte ich jetzt so versucht zu realisieren:

    HTML-Code:
    function add_back() {
       var addh = document.getElementById('addh');
       var add = document.getElementById('add');
          if (document.activeElement === addh || document.activeElement === add) { } else {
             document.getElementById('addh').style.display = 'none';
             document.getElementById('add').style.display = 'none';
          }
    }
    so gehts halt leider nicht, warum ist mir auch unklar!

    LG, Chris


  • #2

    onfocusout ist Javascript, Javascript gehört aber nicht in HTML sondern in Javascript Dateien. Verwende stattdessen eventlistener.

    Kommentar


    • #3
      Zitat von chris77 Beitrag anzeigen
      das hatte ich jetzt so versucht zu realisieren:
      Und das hatte ich jetzt so versucht zu realisieren:
      HTML-Code:
      function add_back() {
      var blabla = blablabla
      var blablabla = blablabla
      if (blablabla || blablabla) dann blablabla
      
      }
      so gehts halt leider nicht, warum ist mir auch unklar!

      Was hast Du schon selber gecheckt und geprüft?!!

      Signaturrrrrrr

      Kommentar


      • #4
        Hallo K313,

        also ich hab deinen Code jetzt getestet, funktioniert auch nicht, muss wohl an den vielen blabla in deinem Post liegen!

        LG, Chris

        Kommentar


        • #5
          id addh und add sind natürlich falsch, da der fokus ja nicht auf dem div liegt sondern auf input, das hab ich jetzt geändert, geht aber trotzdem noch nicht!

          der focus scheint auch kurz auf HTMLBody zu liegen, und nicht mehr auf input wenn ich zwischen den beiden elementen wechsel

          Kommentar


          • #6
            Schmeiss den Code weg und fange erst mal an zu überlegen. Wenn etwas nicht so funktioniert, wie du es dir vorstellst, dann schaue dir die Stelle an wo du meinst das es so nicht geht, Browsertools(F12) dabei verwenden.
            Benenne deine Variablen, und Bezeichner lesbar.
            Gehe logisch vor und nicht chaotisch und trenne immer Javascript vom HTML.

            Kommentar


            • #7
              Zitat von chris77 Beitrag anzeigen
              Hallo K313,

              also ich hab deinen Code jetzt getestet, funktioniert auch nicht, muss wohl an den vielen blabla in deinem Post liegen!

              LG, Chris
              ja, wie immer, nur bloße Vermutungen...

              Beweise es mir, wenn Du zumindest ein wenig in der Programmierung was verstehst. Zieg mir Dein logisches Denken.
              Signaturrrrrrr

              Kommentar


              • #8
                #3, #6, #7 ??

                Zitat von chris77 Beitrag anzeigen
                der focus scheint auch kurz auf HTMLBody zu liegen, und nicht mehr auf input ...
                Das scheint nicht nur so, das ist auch so.
                HTML-Code:
                <!doctype html>
                <html lang="de">
                  <meta charset="UTF-8">
                  <title>Test Focus</title>
                  <input id=inpOne autofocus>
                  <input>
                  <button>Click...</button>
                  <script>
                    inpOne.addEventListener('focusout',
                      function() {console.log(document.activeElement.tagName)})
                  </script>
                Überlege mal welches Element den Fokus hat, wenn Du input verlässt...

                Kommentar


                • #9
                  Hallo, ja das ist es, der Focus geht vom ersten Input auf kein Focus = body (siehe hier) und da wird dann die if entscheidung getroffen.

                  HTML und JavaScript trennen stelle ich mir bei so kleinen Sachen irgendwann sehr unübersichtlich vor, ich ich habe dann ja, ausgenommen von Kommentaren, überhaupt nicht die möglichkeit im quelltext rückschlüsse vom HTML auf evtl. JavaScript funktionen zu schließen. mit den onclick, focusout etc. sehe ich das immer sofort. der eventlistener wäre ja nur in der JavaScript datei und ich müsste über die id, erst mal rausfinden um welches html element es sich überhaupt handelt. erst mal bleibe ich bei meinem stiel, aber danke für die hinweise.

                  Und der Ansatz ist eine Sackgasse, also ja ich schmeiße den Code weg und überlege mir was anderes

                  LG, Chris

                  Kommentar


                  • #10

                    Bei Klick irgendwo auf der Seite (kein Input hat mehr den Fokus)werden die Inputs "disabled"(hier zur Demo nicht ausgeblendet).

                    Klickt man auf eines der Inputs, werden diese wieder "enabled".

                    PHP-Code:
                    <!DOCTYPE HTML>
                    <
                    html lang="de">
                    <
                    head>
                    <
                    title>Untitled</title>
                    <
                    script>
                    document.addEventListener('DOMContentLoaded', function(){
                     
                    document.querySelector("#text1").focus();
                     
                    // Inputs disabled
                     
                    function disableInputs(ev){
                      var 
                    elem ev.targetname elem.nodeName;
                     
                    // Auf welches Element wurde geklickt
                     
                    alert("Angeklickt wurde: "+name);
                     if(
                    name!="INPUT"){
                      
                    document.querySelector("#text1").disabled true;
                      
                    document.querySelector("#text2").disabled true;
                     }
                     }
                     
                    // Inputs enabled
                     
                    function enableInputs(ev){
                      var 
                    elem ev.targetname elem.nodeName;
                     if(
                    name=="INPUT"){
                      
                    document.querySelector("#text1").disabled false;
                      
                    document.querySelector("#text2").disabled false;
                      }
                     }
                     var 
                    seite document.documentElement;
                     
                    seite.addEventListener("click"disableInputs);
                     
                    seite.addEventListener("click"enableInputs);
                    });
                    // -->
                    </script>
                    </head>
                    <body>
                    <h1>Ueberschrift</h1>
                    <form action="" method="post">
                    <input type="text" id="text1" />
                    <input type="text" id="text2" />
                    <p>Ein Absatz</p>
                    </form>
                    </body>
                    </html> 

                    Kommentar


                    • #11
                      Günni

                      Edge, Firefox ??
                      2 x klick event gebunden am gleichen Element

                      Das war nix...

                      Kommentar

                      Lädt...
                      X