Hajo Marten: INPUT TYPE=TEXT und Eventhandler

Hai @all,

ich habe ein kleines Problem:
Ich möchte in einem Eingabefeld alle eingegebenen Buchstaben in
Grossbuchstaben umwandeln (direkt bei der Eingabe) und nachdem der Anwender
das Eingabefeld verläßt, die eingegebene Zeichenkette überprüfen.

Mein Ansatz dazu sieht wie folgt aus:

<html>
   <head>
      <title>Test</title>
      <script language="JavaScript">
      <!--
         function checkInput(eingabeFeld) {
            alert("Eingabe:\n"" + eingabeFeld.value + """);
         }

function transformToUpperCase(eingabeFeld) {
            var strUpperCase;
            strUpperCase = eingabeFeld.value.toUpperCase();
            eingabeFeld.value=strUpperCase;
         }
      // -->
      </script>
   </head>
   <body>
      <form name="Test">
         <input type=text size=30 name="Eingabe" language=javascript
onkeyup="transformToUpperCase(Eingabe)" onchange="checkInput(this)">
      </form>
   </body>
</html>

Leider wird onchange nicht aufgerufen.
Folgendes dagegen funktioniert:

<html>
   <head>
      <title>Test</title>
      <script language="JavaScript">
      <!--
         function checkInput(eingabeFeld) {
            alert("Eingabe:\n"" + eingabeFeld.value + """);
         }

function transformToUpperCase(eingabeFeld) {
            var strUpperCase;
            strUpperCase = eingabeFeld.value.toUpperCase();
            eingabeFeld.value=strUpperCase;
         }
      // -->
      </script>
   </head>
   <body>
      <form name="Test">
         <input type=text size=30 name="Eingabe" language=javascript
onkeyup="alert(window.event.keyCode)" onchange="checkInput(this)">
      </form>
   </body>
</html>

Statt der Konvertierungsfunktion rufe ich hier nur einfach ein flottes
"alert" auf.
Meine Fragen:
Wieso funktioniert das obere Konstrukt nicht?
Gibts ggf. bessere/andere Lösungen um die Eingabe von Buchstaben in
Grossbuchstaben umzuwandeln?

Für massig Tips und Hinweise bin ich jetzt schon dankbar.

Ciao, Hajo

  1. Hi Hajo,

    beím schnellen Überfliegen fällt mir auf:

    <form name="Test">
             <input type=text size=30 name="Eingabe" language=javascript
    onkeyup="transformToUpperCase(Eingabe)" onchange="checkInput(this)">
          </form>
       </body>
    </html>

    Könnte es sein, dass bei dieser Kontruktion t h e o r e t i s c h nach jedem Aufruf der "transform"-Funktion das onchange-Ereignis eintreten müsste??
    Beobachtest Du dasselbe bei Verwendung des onblur-Handlers?

    Grüße,
    Martin

    1. Hi Hajo,

      das Attribut "language=javascript" des Input-Elements ist unnötig (vielleicht sogar kontraproduktiv?).

      Grüße,
      Martin

    2. Hi Hajo,

      beím schnellen Überfliegen fällt mir auf:

      <form name="Test">
               <input type=text size=30 name="Eingabe" language=javascript
      onkeyup="transformToUpperCase(Eingabe)" onchange="checkInput(this)">
            </form>
         </body>
      </html>

      Könnte es sein, dass bei dieser Kontruktion t h e o r e t i s c h nach jedem Aufruf der "transform"-Funktion das onchange-Ereignis eintreten müsste??
      Beobachtest Du dasselbe bei Verwendung des onblur-Handlers?

      Grüße,
      Martin

      Hai Martin,

      das onchange-Ereignis tritt nicht direkt ein, wenn sich etwas geändert hat, sonder vielmehr erst, wenn der Anwender irgendetwas in ein Feld eingibt und dann woanders hinklickt.
      siehe auch: http://www.teamone.de/selfhtml/tebj.htm#a4

      Mit dem onBlur-Ereignis funktioniert mein Script aber lustigerweise.

      Ciao, Hajo

  2. gruss Hajo;

    probier mal dieses - ist aber nur auf dem MSIE getestet:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>

    <head>
    <title>toUpperCase.html</title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var timeoutID = null;
    var timeoutProof = false;
    var strUpperCase = "";

    function transformToUpperCase()
     {clearTimeout(timeoutID);
      if (!timeoutProof) {return;}
      strUpperCase = self.document.forms["Test"].elements["Eingabe"].value;
      strUpperCase = strUpperCase.toUpperCase();
      self.document.forms["Test"].elements["Eingabe"].value = strUpperCase;
      timeoutID = setTimeout("self.transformToUpperCase()",50);
     }
    // -->
    </script>
    </head>

    <body>
    <form name="Test">
    <input type="text" size="30" name="Eingabe" onfocus="self.timeoutProof=true;self.transformToUpperCase()" onblur="self.timeoutProof=false">
    </form>
    </body>

    </html>

    by(t)e by(t)e - peterS. - pseliger@gmx.net