Ankündigung

Einklappen
Keine Ankündigung bisher.

Über JS den Focus auf ein Input prüfen

Einklappen

Neue Werbung 2019

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

  • Über JS den Focus auf ein Input prüfen

    Hallo zusammen,

    mit dem folgenden Code möchte ich herne prüfen, ob das Input-Feld im Focus steht:

    HTML-Code:
    <html>
      <head>
    
      </head>
    
      <body>
        <div class="form-group">
          <label for="usr">Name:</label>
          <input type="text" style="width:20%; margin:auto;" class="form-control" id="usr">
        </div> 
    
        <p id="demo"></p>
    
        <script>
        setInterval("myFunction()", 1);
    
        function myFunction() {
            var x = document.getElementById("demo");
            var y = document.getElementById("usr");
            if (y.hasFocus()) {
                x.innerHTML = "The document has focus.";
            } else {
                x.innerHTML = "The document DOES NOT have focus.";
            }
        }
        </script>   
      </body>
    </html>
    Aber ich erhalte keine Ausgabe - was mache ich hier falsch?

    VG, David

  • #2
    .innerHTML greift auf den Inhalt zwischen einem Open- und End-Tag zu. Bei einem Input-Feld dürftest du mit .value besser fahren.

    Kommentar


    • #3
      hasFocus bezieht sich auf das geamte Document und deren Inhalte darin. Das heisst wenn ein Element den Fokus innerhalb des Dokumentes inne hat, dann ist hasFocus() true sonst false.
      Das kann somit nicht auf einzelne Elemente innerhalb des Dokumentes angewendet werden.

      Um dieses Problem zu umgehen kannst du schauen ob das Element gerade aktiv (activeElement ist true) ist.

      Ich nehme mal an du hast das Beispiel von der w3school Seite kopiert und angepasst. Bei w3school arbeiten sie in den Beispielen mit iframes weshalb das Beispiel dort funktioniert und bei dir nicht.

      Du könntest es also so machen
      HTML-Code:
      <script>
          setInterval("myFunction()", 1);
      
          function myFunction() {
              var x = document.getElementById('demo');
              var y = document.getElementById('usr');
              if (y === document.activeElement) {
                  x.textContent = "The document has focus.";
              } else {
                  x.textContent = "The document DOES NOT have focus.";
              }
          }
          </script>  
      Wenn du nur Text ausgeben willst ist innerHTML ggü. textContent die schlechtere Wahl, weil nicht dafür vorgesehen.

      Kommentar


      • #4
        Ein Blick in die Konsole hätte die Frage beantwortet:
        Code:
        xxx.html:20 Uncaught TypeError: y.hasFocus is not a function
            at myFunction (xxx.html:20)
            at <anonymous>:1:1
        myFunction @ xxx.html:20
        (anonymous) @ VM102:1
        setInterval (async)
        (anonymous) @ xxx.html:15

        Kommentar


        • #5
          Guten Morgen und danke für eure Hilfe!

          Ich habe den Code jetzt entsprechend angepasst - es funktioniert zwar, aber noch nicht ganz so, wie gewünscht...

          HTML-Code:
          <html>
            <head>
            </head>
          
            <body>
              <div class="form-group">
                <label for="usr">Name:</label>
                <input type="text" style="width:20%; margin:auto;" class="form-control" id="usr"><span id="demo"></span>
              </div> 
          
              <script>
                setInterval("myFunction()", 1);
          
                function myFunction() {
                  var x = document.getElementById('demo');
                  var y = document.getElementById('usr');
                  if (y === document.activeElement) {
                      x.innerHTML = "<input type='submit' onclick='alert()' value='Okay' name='ok' id='ok'>";
                  } else {
                      x.innerHTML = "";
                  }
                }
              </script>    
            </body>
          </html>
          Jetzt erscheint der Button, wenn das Input-Feld aktiv ist.
          Wenn ich den Button aber anklicke, verschwindet dieser, weil dann schließlich die else-Anweisung
          ausgeführt wird, da das Input-Feld nicht mehr aktiv ist - verständlich. Aber... - wie kann ich dennoch
          den Button klicken? Und parallel dazu den Button verschwinden lassen, wenn das Feld nicht mehr
          aktiv ist - hat jemand einen Denkanstoß für mich?

          Kommentar


          • #6
            Am besten erklärst du mal was das letztendlich werden soll, dann braucht man nicht herumraten.

            Kommentar


            • #7
              Das setInterval() ist halt Quatsch. Du solltest besser mit Events arbeiten.

              Kommentar


              • #8
                Zitat von Dsimon24 Beitrag anzeigen
                Jetzt erscheint der Button, wenn das Input-Feld aktiv ist.

                Wenn ich den Button aber anklicke, verschwindet dieser, weil dann schließlich die else-Anweisung ausgeführt wird, da das Input-Feld nicht mehr aktiv ist - verständlich.

                Aber... - wie kann ich dennoch den Button klicken? Und parallel dazu den Button verschwinden lassen, wenn das Feld nicht mehr aktiv ist - hat jemand einen Denkanstoß für mich?
                Hi Dsimon24,

                ich vermute jetzt mal, mit der Frage: "Aber... - wie kann ich dennoch den Button klicken?" meinst du wohl, dass der Button nach dem Klick verschwindet,

                und nichts passiert, sprich: Das Formular wird nicht gesendet.

                Also dachte ich mir, wenn ich dem Button das Event mouseDown zuweise, könnte es funktionieren. Also, sobald ich über dem Button die Maustaste drücke.

                PHP-Code:
                <!DOCTYPE HTML>
                <html>
                <head>
                <title>Untitled</title>
                <style type="text/css">
                <!--
                #btn_submit{
                 visibility: hidden;
                }
                -->
                </style>
                <script type="text/javascript">
                <!--
                document.addEventListener('DOMContentLoaded', initForm);
                function initForm(){
                 var textfeld = document.getElementById("text1");
                 var button = document.getElementById("btn_submit");
                 var formular = document.getElementById("form1");
                 /* Button wird sichtbar, Klick ins Textfeld */
                 textfeld.addEventListener("focusin", function(){
                  button.style.visibility = "visible";
                 });
                 /* Button wird unsichtbar, Klick irgendwo ins Dokument */
                 textfeld.addEventListener("focusout", function(){
                  button.style.visibility = "hidden";
                 });
                 /* Nach dem mouseDown-Event auf dem Button wird das Formular gesendet */
                 button.addEventListener("mousedown", function(){
                  formular.submit();
                 });
                }
                // -->
                </script>
                </head>
                <body>
                <form action="" method="post" id="form1">
                <input type="text" id="text1" name="text1"/>
                <input type="submit" id="btn_submit"/>
                </form>
                <?php
                if(isset($_POST["text1"]) && strlen($_POST["text1"]) > 0){
                 echo 
                $_POST["text1"];
                }
                ?>
                </body>
                </html>
                Gruß
                Günni

                Kommentar

                Lädt...
                X