Eric Falbe: mit event onkeydown() auf Variablen zugreifen?

Ich möchte mit der event "onkeydown()" auf Variablen zugreifen?
Wie kann ich das machen?
Die Variablen sollen über Tasten verändert werden können und dann die Hintergrundfarbe verändern o.ä.
Leider steht in der Objektreferenz nichts dazu drin.
Wo finde ich Infos?

  1. Hi,

    Ich möchte mit der event "onkeydown()" auf Variablen zugreifen?

    onkeydown ist kein Funktion, sondern ein Ereignis, also gewissermaßen ein Zeitpunkt. Mit Hilfe des Event-Handlers kannst Du zu eben diesem Zeitpunkt JavaScript-Code ausführen - an welchem absolut nichts Besonderes ist.

    Wie kann ich das machen?

    Wo ist Dein Problem?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. onkeydown ist kein Funktion, sondern ein Ereignis, also gewissermaßen ein Zeitpunkt. Mit Hilfe des Event-Handlers kannst Du zu eben diesem Zeitpunkt JavaScript-Code ausführen - an welchem absolut nichts Besonderes ist.

      Also ich möchte gerne eine Funktion aufrufen, die Variablen verändert; aber wenn möglich ohne dabei ein Textfeld eröffnen zu müssen. Es soll jede gebrückte Taste registriert werden, solange das Fenster angeklickt ist.

  2. Hallo erstmal!

    Ich möchte mit der event "onkeydown()" auf Variablen zugreifen?

    Möchtest Du nun, oder möchtest Du nicht?

    Wie kann ich das machen?

    Das solltest Du flux seinlassen, den Mozilla mag das nur in <input> und <textarea>. Daher nimm onClick.

    <script type="text/javascript">
    var x=543210;
    </script>
    <!-- Auslassung -->

    <div onClick="alert(x)">alert</div>
    <div onClick="x=prompt('was soll var x aufnehmen?','')">&auml;ndern</div>

    Wo finde ich Infos?

    http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onkeydown
    http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick

    Gruß aus Berlin!
    eddi

    1. Möchtest Du nun, oder möchtest Du nicht?

      Haha. Die Frage bezog sich auf das wie.

      Das solltest Du flux seinlassen, den Mozilla mag das nur in <input> und <textarea>. Daher nimm onClick.

      Wer hat Mozilla?
      Mein Problem liegt mehr darin eine globale Variable zu kreieren.
      In meinem Programm jetzt wird jedes mal eine Variable neu erschaffen.

      <script type="text/javascript">
      var x=543210;
      </script>
      <!-- Auslassung -->

      <div onClick="alert(x)">alert</div>
      <div onClick="x=prompt('was soll var x aufnehmen?','')">&auml;ndern</div>

      Das Programm klappt ganz gut.
      Mal sehen, ob ich es sinnvoll einbauen kann.

      1. Re:

        Das solltest Du flux seinlassen, den Mozilla mag das nur in <input> und <textarea>. Daher nimm onClick.
        Wer hat Mozilla?

        Beispielsweise ich. AOL will nicht ohne Grund für zukünftige Onlinesoftware einen Hybriden herstellen und ansonsten noch Millionen andere http://www.spiegel.de/netzwelt/technologie/0,1518,329472,00.html neben mir...

        Mein Problem liegt mehr darin eine globale Variable zu kreieren.

        <script type="text/javascript">
        var x;
        </script>

        Und schon ist sie da!

        Gruß aus Berlin!
        eddi

        1. Beispielsweise ich. AOL will nicht ohne Grund für zukünftige Onlinesoftware einen Hybriden herstellen und ansonsten noch Millionen andere neben mir...

          Einen Hybriden von Mozilla? Bei AOL gibt es doch eh extra Software zum browsen, oder?

          <script type="text/javascript">
          var x;
          </script>
          Und schon ist sie da!

          Ja, das ist klar, doch kann man diese Variable auch mit Hilfe der Event onkeydown verändern?

          <html><head><title>Test</title>
          <!-- JScript-Bereiche fuer MS Internet Explorer -->
          <script for="document" event="onkeydown()" language="JScript" type="text/jscript">
          <!--
           { window.status = "Taste mit Dezimalwert " + window.event.keyCode + " gedrueckt"; return true; }
          //-->
          </script>
          <script for="document" event="onkeyup()" language="JScript" type="text/jscript">
          <!--
           { window.status = "Taste mit Dezimalwert " + window.event.keyCode + " losgelassen"; return true; }
          //-->
          </script>
          </head><body>
          </body></html>

    2. Also ich habe es mir nochmal überlegt und es ist wesentlich besser, wenn die Funktion auf Tasten reagiert.
      Laut Referenz hier bei SELFHTML ist die event auf in div-Feldern erlaubt. Ich kann leider nicht herausfinden, wie die Funktion aber nun wirklich aufgerufen wird.
      Am besten wäre es jedoch, wenn es auf jeden Testendruck bei angewähltem Fenster reagiert.

      onKeyDown (bei gedrückter Taste)
      Tritt ein, wenn der Anwender, während er ein Element aktiviert hat, eine Taste drückt.

      Nach JavaScript (Netscape) erlaubt erlaubt in folgenden HTML-Tags:
      <input> <textarea>

      Nach HTML 4.0 erlaubt in folgenden HTML-Tags:
      <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

    3. Das solltest Du flux seinlassen, den Mozilla mag das nur in <input> und <textarea>. Daher nimm onClick.

      Nö.

      <body onkeydown="test(event);">
      <script type="text/javascript">

      function test(e)
      {
          if(!e) e = window.event;
          var key = e.which ? e.which : e.keyCode;
          alert(key);

      }
      </script>

      </body>

      Struppi.

      1. Hi Struppi,

        danke! :)

        Gruß aus Berlin!
        eddi

        --
        POST SCRIPTA SIND UNÜBERLEGTE HANDLUNGEN IM KONTEXT EINES HTML-FORMULARS!
      2. hi,

        <body onkeydown="test(event);">

        kann ich jetzt überhaupt noch in ein auf der seite vorhandenes formular etwas eintippen, _ohne_ das dieser eventhandler anspringt?

        gruß,
        wahsaga

        --
        Rest in peace, Dimebag!
        #
        "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
        1. Привет wahsaga.

          <body onkeydown="test(event);">
          kann ich jetzt überhaupt noch in ein auf der seite vorhandenes formular etwas eintippen, _ohne_ das dieser eventhandler anspringt?

          Nö.

          Дружба!
          Siechfred

          --
          »Sie kochten heimlich mit Wasser und tranken öffentlich Wein.«
        2. Hallo,

          <body onkeydown="test(event);">

          kann ich jetzt überhaupt noch in ein auf der seite vorhandenes formular etwas eintippen, _ohne_ das dieser eventhandler anspringt?

          Events steigen normalerweise auf (Bubbling). Das heißt, jeder Event wird für jedes Eltern-Element gefeuert, bis zum Wurzelelement des Dokuments. Wenn dort oder auf dem Weg dorthin ein Handler registriert ist, wird dieser ausgeführt, mit eben diesem Elementknoten als e.currentTarget und dem Ursprungselementknoten als e.target. Es liegt also in der Natur des Bubbling, dass der Keydown-Handler beim body-Element immer gefeuert wird, wenn ein solcher Event bei einem input- oder textarea-Element darin passiert.

          Mathias

          1. hi,

            Events steigen normalerweise auf (Bubbling).

            ist mir klar.

            Es liegt also in der Natur des Bubbling, dass der Keydown-Handler beim body-Element immer gefeuert wird, wenn ein solcher Event bei einem input- oder textarea-Element darin passiert.

            darauf wollte ich ja auch nur hinweisen - dass ggf. noch zusätzliche maßnahmen ergriffen werden müssen, wenn man "normale" formulareingaben noch ermöglichen will, _ohne_ dass dieser handler darauf anspringt (und dann irgendwelche farbwerte ändert, wie das ja hier der plan des OP war).

            gruß,
            wahsaga

            --
            Rest in peace, Dimebag!
            #
            "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
            1. Hallo,

              darauf wollte ich ja auch nur hinweisen - dass ggf. noch zusätzliche maßnahmen ergriffen werden müssen, wenn man "normale" formulareingaben noch ermöglichen will, _ohne_ dass dieser handler darauf anspringt

              Dann sollten wir vielleicht diese Maßnahmen beschreiben:

              function Taste (e) {
               var key, target;

              /* Event-Objekt in Erfahrung bringen */
               if (!e) e = window.event;

              /* Tastencode in Erfahrung bringen */
               if (e.keyCode) key = e.keyCode;
               else if (e.which) key = e.which;
               else return;

              /* Element in Erfahrung bringen, bei dem der Event passierte */
               if (e.target) target = e.target;
               else if (e.srcElement) target = e.srcElement;
               else return;

              /* Prüfung, ob das Target-Element ein input- oder textarea-Element ist */
               if (target.type && (target.type == "textarea" || target.type == "text")) {
               // Alternativ:
               // if (target.nodeName && (target.nodeName.toLowerCase() == "input" || arget.nodeName.toLowerCase() == "textarea")) {
                // Target-Element ist input oder textarea.
                // Breche Event-Verarbeitung ab. (optional)
                if (e.stopPropagation) e.stopPropagation();
                else if (typeof(e.cancelBubble) == "boolean") e.cancelBubble = true;
                return;
               }

              /* Verarbeitung des Tastendrucks */
               // ...
              }

              Mathias

              1. Kleine Korrektur, da fehlt der Buchstabe »t« beim dritten target:

                // Alternativ:
                // if (target.nodeName && (target.nodeName.toLowerCase() == "input" || arget.nodeName.toLowerCase() == "textarea")) {

                // if (target.nodeName && (target.nodeName.toLowerCase() == "input" || target.nodeName.toLowerCase() == "textarea")) {

              2. Ach du Schreck !
                Das wird jetzt aber echt verwirrend.
                Dabei wollte ich nur eine einfache Farbveränderung programmieren.
                Wo kann man das mit dem bubbleing nachlesen?
                Steht da auch was in SELFHTML darüber drin?

                1. Hallo,

                  Ach du Schreck !
                  Das wird jetzt aber echt verwirrend.
                  Dabei wollte ich nur eine einfache Farbveränderung programmieren.

                  Du musst den Code auch nicht vollkommen verstehen, Event-Handling ist ein Fass ohne Boden. Wenn du keine Formulare in dem Dokument hast, kannst du dir diese Umwege sowieso sparen.

                  Wo kann man das mit dem bubbleing nachlesen?

                  http://www.quirksmode.org/js/introevents.html ist insgesamt sehr aufschlussreich, speziell http://www.quirksmode.org/js/events_order.html.

                  Steht da auch was in SELFHTML darüber drin?

                  Höchstens hier: http://de.selfhtml.org/dhtml/modelle/microsoft.htm#event_bubbling

                  Mathias

      3. Nö.

        <body onkeydown="test(event);">
        <script type="text/javascript">

        function test(e)
        {
            if(!e) e = window.event;
            var key = e.which ? e.which : e.keyCode;
            alert(key);

        }
        </script>

        </body>

        Das ist an sich schon mal ganz gut Struppi.
        Wenn man das event mit dem body verbindet, kann man auch gut mit Variablen Arbeiten. Werde mich gleich mal dran machen.

        1. Also ich habe jetzt eine neue funktion kreiert und mit der event onkeydown innerhalb der body-tags verknüpft. Aber es wird leider keine der switch Teile ausgeführt.
          Sieht jemand woran es liegen kann?

          <HTML>
          <HEAD>
          <TITLE>JavaTest</TITLE>
          </HEAD>

          <BODY onkeydown="Taste(event);">
          <H1>JavaTest</H1><BR>

          <script type="text/javascript">
          <!--
           alert("Hallo Welt! Dies ist Erics Java Testseite");

          Farbteile = new Array(12,0,0);
            var Farbteil = 0;

          function HintergrundWechseln1(Farbe) {
              Farbteile[Farbe] += 1;
              Farbteil = "#" + (Farbteile[0] < 16 ? '0' : '') + Farbteile[0].toString(16) + (Farbteile[1] < 16 ? '0' : '') + Farbteile[1].toString(16) + (Farbteile[2] < 16 ? '0' : '') + Farbteile[2].toString(16);
              document.bgColor = Farbteil;
            }

          function Taste(e)
            {
              if(!e) e = window.event;
              var key = e.which ? e.which : e.keyCode;
              switch(key){
              case "81":
              alert("Rot !");
              HintergrundWechseln1(0)
              break;
              case "65":
              Farbteile -=2;
              HintergrundWechseln1(0)
              break;
              case "87":
              HintergrundWechseln1(1)
              break;
              case "83":
              Farbteile -=2;
              HintergrundWechseln1(1)
              break;
              case "69":
              HintergrundWechseln1(2)
              break;
              case "68":
              Farbteile -=2;
              HintergrundWechseln1(2)
              break;

          }
            }
          //-->
          </script>
          </BODY>
          </HTML>

          1. hi,

            Also ich habe jetzt eine neue funktion kreiert und mit der event onkeydown innerhalb der body-tags verknüpft. Aber es wird leider keine der switch Teile ausgeführt.

            wie wär's mit elementarstem debugging, in dem du erst mal per alert kontrollierst, was überhaupt in der variablen drin steht, die du zu switchen versuchst?

            gruß,
            wahsaga

            --
            Rest in peace, Dimebag!
            #
            "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
          2. Hallo,

            var key = e.which ? e.which : e.keyCode;
                switch(key){
                case "81":

            key ist eine Variable vom Typ Number, also eine Zahl. Du vergleichst sie an dieser Stelle mit einem String. Das geht normalerweise (10 == "10" ergibt true), aber switch nimmt anscheinend keine automatische Typkonvertierung vor, sondern vergleicht auch die Typen (10 === "10" ergibt false).

            Du musst den Nummernwert also auch als Nummernwert notieren, nicht als String.

            switch (key) {
             case 81 :
              ...

            Das Hintergrund-Ändern-System ist mir unverständlich, aber gut, ich nehme einmal an, du weißt, was du da machst.

            Farbteile -=2;

            Farbteile ist ein Array! Er wird so definiert:
            Farbteile = new Array(12,0,0);

            Von einem Array kannst du nicht 2 substrahieren. Du wolltest wahrscheinlich ein Arrayelement ansprechen, denn diese sind schließlich Zahlen, mit denen eine Subtraktion vorgenommen werden kann. Zum Beispiel:

            Farbteile[0] -= 2; // Rotanteil verkleinern

            Beachte auch, dass du so irgendwann Negativwerte bekommst und die Funktion HintergrundWechseln1 seltsame Resultate liefert.

            Mathias

            1. switch (key) {
              case 81 :

              Mach ich gleich mal

              Farbteile ist ein Array! Er wird so definiert:
              Farbteile = new Array(12,0,0);

              Das mit dem Array habe ich mittlerweile auch gefunden.