Ankündigung

Einklappen
Keine Ankündigung bisher.

Input Feld per Tastendruck ändern

Einklappen

Neue Werbung 2019

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

  • Input Feld per Tastendruck ändern

    Hallo, ich habe folgendes Problem. Ich habe ein Formular mit 2 Input Feldern und möchte diese per Tastendruck ändern. (Im Moment mit Array gelöst, aber im Prinzip soll nur hochgezählt werden). Nehme hier auch gerne Vorschläge an (also einfach nur hochzählen).

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>Beispiel</title>
    <script type="text/javascript">
    <!--
    A=new Array(106,'1','2','3','4','5','6','7');
    a=1;
    B=new Array(107,'1','2','3','4','5');
    b=1;
    function blubb(e,feld,arr){
    if(!e)e=window.event;
    key=e.which?e.which:e.keyCode;
    Arr=window[arr];
    if(key==Arr[0]){
    feld.value=Arr[window[arr.toLowerCase()]++];
    if(window[arr.toLowerCase()]==Arr.length)window[arr.toLowerCase()]=1;
    return false;
    }
    }
    //-->
    </script>
    </head>
    <body> Fehler <input type="text" onkeypress="return blubb(event,this,'A')" name="Fehler" size="10" >  &nbsp;
        Verweigerungen <input type="text" onkeypress="return blubb(event,this,'B')" name="Verweigerungen" size="10"  >
    
    </body>
    </html>

    Wenn ich in Input Feld 1 bin und "j" drücke, wird 1 weiter gezählt. Wenn ich in Feld 2 bin und "k" drücke wird dort 1 weiter gezählt.

    Ich hätte das aber gerne unabhängig davon wo mein Fokus gerade ist...

    Also wenn ich j drücke wird in Feld 1 gezählt und wenn ich k drücke in Feld 2.

    Geht sowas überhaupt? Ich bin noch relativ neu in Javascript, habe eigentlich bisher alles immer nur mit php gelöst. Aber hier komme ich mit php leider nicht mehr weiter.

    Ich danke euch!!

  • #2
    Zitat von steffimomo Beitrag anzeigen

    Wenn ich in Input Feld 1 bin und "j" drücke, wird 1 weiter gezählt. Wenn ich in Feld 2 bin und "k" drücke, wird dort 1 weiter gezählt.

    Ich hätte das aber gerne unabhängig davon wo mein Fokus gerade ist...

    Also wenn ich j drücke wird in Feld 1 gezählt und wenn ich k drücke in Feld 2.
    Das verstehe ich nicht so ganz.
    Egal ob der Focus in Feld1 und 2 ist , soll eine Variable hochgezählt werden?
    Oder soll, wenn du in Feld 1 oder 2 bist und dann ein j oder k drückst nur diese Variable hochgezählt werden?

    Ich würde erstmal die Arrays entsorgen, weil einfaches hochzählen solltest du von PHP ja auch kennen
    HTML-Code:
    var x=0;
    x++;
    console.log(x);// x=1;
    Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
    Erreichbar in mein Javascript-Forum und in Facebook-Chat

    Kommentar


    • #3
      Wenn man weiß, was man will, lässt sich das Schritt für Schritt relativ einfach aufbauen.

      1. Simples HTML zum Testen
      HTML-Code:
      <input name="f_one"/><input name="f_two"/>
      2. Welche Variablen benötige ich
      Code:
      // set global value arrays and offsets
      var aOne = [106,1,2,3,4,5,6,7];
      var aTwo = [107,1,2,3,4,5];
      var offsetOne = 0;
      var offsetTwo = 0;
      
      // fetch field objects as global var
      var fOne = document.querySelector('input[name="f_one"]');
      var fTwo = document.querySelector('input[name="f_two"]');
      
      SetFields();
      3. Die Funktion SetFields() aus 1. macht nichts anderes, wie das Setzen der Werte entsprechend dem offSet
      Code:
      function SetFields()
      {
        fOne.value = aOne[offsetOne];
        fTwo.value = aTwo[offsetTwo];
      }
      4. Wie fange ich nun die Tasten j und k ab?
      Code:
      // global event listener
      document.addEventListener('keyup', e => {
        if (e.keyCode == 74) // j
          offsetOne = (offsetOne+1 == aOne.length) ? 0 : ++offsetOne;
      
        if (e.keyCode == 75) // k
          offsetTwo = (offsetTwo+1 == aTwo.length) ? 0 : ++offsetTwo;
      
        SetFields();
      });
      Das ganze geht sicher noch kürzer, aber zum Nachvollziehen und Verständnis dürfte der Code ausreichend sein.

      Das keyup-Event wird an das Dokument geknüpft und ist so gut wie überall gültig, egal welches Element den Fokus hat, auch wenn dieser sich auf einem der Eingabefelder befindet.
      Dadurch, dass im EventListener die Felder immer neu gesetzt werden, werden die Feldwerte auch immer neu gesetzt, so dass am Ende immer der korrekte Wert enthalten ist.
      Die gedrückten Buchstaben sind einmal kurz zu sehen, bevor die Felder neu gesetzt werden, aber das auch nur, wenn sich ein Fokus in dem Feld befindet.

      Das wäre z.B. eine Möglichkeit, das umzusetzen, wobei da auch der Kontext sauber getrennt ist.

      Das Verwenden von on*-Attributen in HTML überschreibt die Standard-Events des Browsers für das Element. Das will man in den wenigsten Fällen, weshalb man sich angewöhnen sollte, alles über addEventListener() zu steuern, da hier unser eigener EventHandler an den/die des Browsers an- bzw. vorgehängt wird. Will man wirklich das Standardverhalten blockieren, gibt es auch hier mit preventDefault() und stopPropagation() die Möglichkeit dazu.
      Competence-Center -> Enjoy the Informatrix
      PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

      Kommentar


      • #4


        Ich danke dir sehr, denn so wie du schreibst, wäre das genau meine Lösung. Jetzt muss da nur noch das Hochzählen rein.. und ganz optimalerweise könnte ich noch mit einer weiteren Taste wieder runterzählen

        DANKE DANKE

        Kommentar


        • #5
          Zitat von basti1012 Beitrag anzeigen
          Das verstehe ich nicht so ganz.
          Egal ob der Focus in Feld1 und 2 ist , soll eine Variable hochgezählt werden?
          Oder soll, wenn du in Feld 1 oder 2 bist und dann ein j oder k drückst nur diese Variable hochgezählt werden?

          Ich würde erstmal die Arrays entsorgen, weil einfaches hochzählen solltest du von PHP ja auch kennen
          HTML-Code:
          var x=0;
          x++;
          console.log(x);// x=1;
          Ja Danke, das Hochzählen ist meine zweite Prio... wichtig für mich ist, dass egal wo ich mich gerade auf der php Seite befinden (also evtl. auch in einem dritten Feld) wenn ich j drücke, das eine hochgezählt werden soll und wenn ich k drücke das andere Feld. Es soll also unabhängig davon sein, wo gerade der Fokus ist.
          Das ist aktuell mein Hauptproblem.
          Vielleicht noch zum Verständnis, es geht darum ,dass ich zwei Buttons per USB angeschlossen habe (die den Tastendruck simulieren). Und ich möchte quasi über diese beiden Buttons zwei Felder hochzählen, was aber auch durcheinander sein kann, also mal das eine mal das andere...

          Ich hoffe ihr versteht mich. Ich danke euch!!
          Wie gesagt, bin neu in Javascript

          Kommentar


          • #6
            Hier noch mein fertiger Code. Danke für eure Hilfen!!

            Code:
            <html> 
            
            <body>
                Fehler <input size="10"  name="f_one"/>
                Verweigerungen <input size="10"  name="f_two"/> 
                Zeit <input size="10"  name="f_three"/>
            
            </body>
            </html> 
            <script type="text/javascript">
                <!--
            // set global value arrays and offsets 
            var offsetOne = 0;
            var offsetTwo = 0;
            
            // fetch field objects as global var
            var fOne = document.querySelector('input[name="f_one"]');
            var fTwo = document.querySelector('input[name="f_two"]');
            
            SetFields(); 
            
            function SetFields()
            {
              fOne.value = offsetOne;
              fTwo.value = offsetTwo;
            } 
            // global event listener
            document.addEventListener('keyup', e => {
              if (e.keyCode == 74) // j
                offsetOne = ++offsetOne;
            
              if (e.keyCode == 75) // k
                offsetTwo =  ++offsetTwo;
            
              if (e.keyCode == 65) // a
                offsetOne =  --offsetOne;
            
              if (e.keyCode == 83) // s
                offsetTwo = --offsetTwo;
            
              SetFields();
            });
            
            //-->
            </script>

            Kommentar

            Lädt...
            X