Ankündigung

Einklappen
Keine Ankündigung bisher.

[jQuery] - Fokussieren des nächsten HTML INPUT-Feldes nach Enter-Taste

Einklappen

Neue Werbung 2019

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

    [jQuery] - Fokussieren des nächsten HTML INPUT-Feldes nach Enter-Taste

    Zuletzt geändert von Alpha; 02.03.2017, 12:34. Grund: JavaScript, jQuery, HTML, Tasten-Ereignisse, Key,Event
    Hi, Leute

    ein vermeintliches einfaches Problem scheint mir im Moment nicht lösbar.
    Ich habe ein Formulat mit mehren Input-Feldern in der Form
    HTML-Code:
    <input type="text" name="vname" value="" size="30" class="next">
<input type="text" name="nname" value="" size="30" class="next">
    meine Versuche von einem Feld mit Enter-Taste zum nächsten zu gelangen waren folgende:

    Code:
        $(this).keypress(function(e) {
        var key = e.which;
        if(key == 13)  // the enter key code
        {
            $(this).next('input').focus();
            //$('input[type=password]').focus();
        }
    });
    Im Debugger des Browsers (FF v50) wird auch das gefeuerte Ereignis [RETURN-Taste] entgegengenommen aber die Zeile:
    Code:
    $(this).next('input').focus();
    wird nicht abgearbeitet. Ich hab auch Beispiele von StackOverflow probiert die mir DuckDuckGo-Suche vorschlug.
    JS und JQUERY an sich arbeiten. Es werden auch keine Fehler in der Konsole angezeigt.

    Sinn der ganzen Sache war über Enter die Eingaben komfortabler zu gestalten. Mit nur 2 Feldern und expliziter Zuweisung, wo der Fokus gesetzt werden soll nach Enter-Taste funktinieren ohne Probleme.

    SG
    bitcoin.de <- Meine Freelancerwährung
    Stichworte: -
  • #2
    Hat nichts mit PHP Frameworks zu tun....

    http://jsfiddle.net/hxZSU/1/

    event.preventDefault() .....
    • 1 Likes

    Kommentar

    • #3
      Zuletzt geändert von derwunner; 02.03.2017, 15:40.
      Hallo,

      ja, das .next() ist meistens etwas zickig und funktioniert kaum wie erwartet. Ich habe es bisher auch nur zum laufen gebracht, wenn es das direkt darauf folgende Element war. Dann brauchst Du auch keinen Filter übergeben.

      jQuery gibt selten Fehler aus. Dann wird halt deine Anweisung auf ein leeres Array ausgeführt. Führt zu keinem Fehler, passiert aber logischerweise auch nichts.

      Wenn es das direkt darauf folgende Element ist, dann könntest Du Dir auch eine Schleife bauen und prüfen, ob das aktuell fokussierte Element schon erreicht worden ist, siehe volles funktionierendes Beispiel:
      HTML-Code:
       <!DOCTYPE html> <html lang="en"> <head>     <title>test</title>     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>     <script type="text/javascript">         var $allFields = null;          function registerFocusHandler() {             $allFields.focus(function () {                var $me = $(this);                $allFields.removeClass("focus");                $me.addClass("focus");             });         }          function registerKeyUpHandler() {             $allFields.on("keyup", function (e) {                 var key = e.which;                 var $me = $(this);                 var indexFound = -2;                  // the enter key code                 if (key == 13) {                     $allFields.each(function (index, value) {                         console.log("Durchlauf", index);                         if ($(value).hasClass("focus")) {                             indexFound = index;                             return;                         }                     });                      indexFound++;                      if (indexFound > -1 && indexFound < $allFields.length) {                         // liegt im Bereich                         $allFields[indexFound].focus();                     } else if (indexFound > -1 && indexFound >= $allFields.length) {                         // ist letztes Element                         $allFields[0].focus();                     }                 }             });         }          function doReady() {             $allFields = $("input.next");             registerFocusHandler();             registerKeyUpHandler();         }          $(document).ready(doReady);     </script> </head> <body>     <input type="text" name="vname" value="" size="30" class="next" />     <input type="text" name="nname" value="" size="30" class="next" />     <input type="text" name="vname" value="" size="30" class="next" />     <input type="text" name="nname" value="" size="30" class="next" /> </body> </html>
      Mit dem $(this) Vergleich in der .each Schleife gings leider auch nicht, obwohl es theoretisch die gleiche Objektreferenz sein müsste. Deswegen habe ich das vielleicht etwas umständlicher mit den addClass eingebaut.


      MFG

      derwunner

      Kommentar

      • #4
        MOD: Verschoben von PHP-Frameworks
        The string "()()" is not palindrom but the String "())(" is.

        Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
        PHP.de Wissenssammlung | Kein Support per PN
        • 1 Likes

        Kommentar

        • #5
          Ich bin kein Freund von jQuery benutze es aber hin und wieder trotzdem.....
          HTML-Code:
          <form action="#">
<input type="text" name="vname" value="" size="30" class="next">
<br>
<input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
  </br>
<input type="text" name="nname" value="" size="30" class="next">
<input type="submit" value="Submit">

</form>
          Javascript:

          HTML-Code:
          $('input:text').keypress(function(e) {
        var key = e.which;
        if(key == 13)  // the enter key code
        {
          event.preventDefault();  
          $(this).nextAll('input:text, input:submit').first().focus();
        }
    });

          Kommentar

          • #6
            In HTML gibt es die Attribute autofocus und tabindex.
            Mit ersterem erreicht man das der Focus auf dieses Eingabeelement gesetzt wird wenn die Seite geladen ist. Das tabindex Attribut bestimmt die Reihenfolge, die mit der Tabulatortaste angesprungen werden. Tabindex bezieht sich dabei nicht nur auf input-Elemente.

            Will man nun das Verhalten der Tabulatortaste auf die Eingabetaste erweitern muss man nur das Tabindex Attribut auslesen und und zum nächsten tabindex springen,.

            http://jsfiddle.net/mekwall/unCu5/


            Kommentar

            • #7
              Es gibt viele Wege nach Rom, Deiner ist schon arg weit....

              Kommentar

              • #8
                @kaminbausatz Beispiel ist schon ganz interessant. Danke erstmal für die rege Beteiligung. Ich muss erstmal wieder Zeit finden das alles auszuprobieren.
                bitcoin.de <- Meine Freelancerwährung

                Kommentar

                • #9
                  Zitat von Alpha Beitrag anzeigen
                  Hi, Leute

                  ein vermeintliches einfaches Problem scheint mir im Moment nicht lösbar.
                  Ich habe ein Formulat mit mehren Input-Feldern in der Form
                  HTML-Code:
                  <input type="text" name="vname" value="" size="30" class="next">
<input type="text" name="nname" value="" size="30" class="next">
                  meine Versuche von einem Feld mit Enter-Taste zum nächsten zu gelangen waren folgende:

                  Code:
                  $(this).keypress(function(e) {
var key = e.which;
if(key == 13) // the enter key code
{
$(this).next('input').focus();
//$('input[type=password]').focus();
}
});
                  Im Debugger des Browsers (FF v50) wird auch das gefeuerte Ereignis [RETURN-Taste] entgegengenommen aber die Zeile:
                  Code:
                  $(this).next('input').focus();
                  wird nicht abgearbeitet. Ich hab auch Beispiele von StackOverflow probiert die mir DuckDuckGo-Suche vorschlug.
                  JS und JQUERY an sich arbeiten. Es werden auch keine Fehler in der Konsole angezeigt.

                  Sinn der ganzen Sache war über Enter die Eingaben komfortabler zu gestalten. Mit nur 2 Feldern und expliziter Zuweisung, wo der Fokus gesetzt werden soll nach Enter-Taste funktinieren ohne Probleme.

                  SG
                  Es hat nichts mit Javascript oder jQuery zu tun. In HTML existiert das Attribut tabindex mit dem du die jeweilige Reihenfolge der Tab-Sprünge durchnummerien kannst.

                  Kommentar

                  • #10
                    Ich nutze kein Tab. Ich möchte Enter benutzen, deswegen steht da auch eine 13 für den ASCII-Code im Quelltext, der für die Taste Enter eben. Und wie ich schon schreib geht das auch mit nur 2 Input-Feldern, weil ich diese explizit anspringe aber offenbar nicht mit mehr als 2, wenn ich von jeder Position zum nächsten Input-Feld mit Enter möchte.

                    Das Codebesipiel von kaminbausatz war bisher die funktionierende Lösung.

                    Ich hab auch die Lösung mit den umgeleiteten Tabs ausprobiert und die funktioniert auch prima.

                    Ich versteh nicht wie du darauf kommst das das alles ohne JS geht. Vielleicht solltest Du nicht um die Urzeit Postings schreiben. Ich denk mal Du hast von JS und jQuery weniger Ahnung als ich. Dein Vollzitat war auch voll überflüssig. Wäre echt nett, wenn du sowas in Zukunft lässt.
                    bitcoin.de <- Meine Freelancerwährung

                    Kommentar

                    • #11
                      Zuletzt geändert von Abo; 05.03.2017, 07:59.
                      Zitat von Alpha Beitrag anzeigen
                      IIch denk mal Du hast von JS und jQuery weniger Ahnung als ich. Dein Vollzitat war auch voll überflüssig. Wäre echt nett, wenn du sowas in Zukunft lässt.
                      Naja wenn du meinst du kommst an meine Erfahrung ran, dann glaub es weiter, aber bitte verschone uns mit solchen postings.
                      Und hier hast du nochmal eine etwas detailiertere Beschreibung für Kaminbausatz.

                      http://stackoverflow.com/questions/1...-form-on-enter
                      Suchzeit via Google 2 Sekunden. Wie heist es so schön Google ist dein bester Freund.

                      P.S.
                      Nur für dich hab ich dein Statement abgekürzt. Ich hoffe es ist dir so genehm

                      Kommentar

                      • #12
                        Zitat von Abo Beitrag anzeigen
                        Und hier hast du nochmal eine etwas detailiertere Beschreibung für Kaminbausatz.

                        http://stackoverflow.com/questions/1...-form-on-enter
                        Hallo Abo, diesen link habe ich in #2 gepostet - das wichtigste war preventDefault - weil ansonsten immer submit bei Enter ausgelöst wird - ich finde diese Lösung aber nicht so prickelnd und habe deswegen in #5 eine einfachere Lösung gepostet. Ansonsten muss ich allerdings auch sagen, dass #9 etwas am Thema vorbei schoss...

                        Kommentar

                        • #13
                          Sry Kamin,

                          hatte ich dann wohl übersehen

                          Kommentar

                          • #14
                            [ot]
                            Zitat von derwunner Beitrag anzeigen
                            ja, das .next() ist meistens etwas zickig und funktioniert kaum wie erwartet. Ich habe es bisher auch nur zum laufen gebracht, wenn es das direkt darauf folgende Element war.
                            Was ja auch genau der Sinn von next() ist. Steht auch genau so in der Doku.

                            Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
                            [/ot]
                            ... wenn man einmal ein offtopic-Tag braucht ...

                            Kommentar

                            Vorherige Weiter
                            Lädt...
                            X