1990metallica: Kein keyupEvent ausgelöst bei drücken der Backspace-Taste

Ich habe einem Textinput per addEventListener/attachEvent eine Funktion zugewiesen, die den Inhalt des Feldes prüft.

Nur wird dieses Event leider nicht ausgelöst wenn man die Backspace Taste drückt.
Habe es im Opera 10, IE 8 und im FF 3.5 getestet.
Überall passiert nichts.

Wie kann ich das Problem lösen?

lg

chris

  1. Nur wird dieses Event leider nicht ausgelöst wenn man die Backspace Taste drückt.
    Habe es im Opera 10, IE 8 und im FF 3.5 getestet.

    Ich auch (FF 3.5, IE 6, OP 9.27).

    Überall passiert nichts.

    das ist falsch, überall wird der Event ausgelöst.

    Wie kann ich das Problem lösen?

    In dem du besser analysierst. Du bist sicher, dass du keinen Fehler im code hast?

    Struppi.

    1. mein Code:

        
      function checkFormFieldIsPositiveInt(formFieldID)  
      {  
      	if((formFieldID == "[object KeyEvent]") || (formFieldID == "[object KeyboardEvent]"))  
      	{  
      		formFieldID = formFieldID.target.id;  
      	}  
      	if(formFieldID == "[object Event]")  
      	{  
      		formFieldID = formFieldID.srcElement.id;  
      	}  
      	  
      	for(i = 0; i < document.getElementById(formFieldID).value.length; ++i)  
      	{  
      		alert('Event ausgelöst');  
      		if((document.getElementById(formFieldID).value.charAt(i) == ".") || (document.getElementById(formFieldID).value.charAt(i) == ",") || ((document.getElementById(formFieldID).value.charAt(i)  < "0") || (document.getElementById(formFieldID).value.charAt(i) > "9")))																																																																																																																		  	{  
      	  	document.getElementById(formFieldID).style.border = "thin solid #FF0000";	  
      			break;  
      		}  
      		else if((document.getElementById(formFieldID).value.charAt(i) == " ") || (document.getElementById(formFieldID).value.charAt(i) == "") || (document.getElementById(formFieldID).value == ""))  
      		{  
      			document.getElementById(formFieldID).style.border = "thin solid #000000";	  
      		}  
      		else  
      		{  
      			document.getElementById(formFieldID).style.border = "thin solid #000000";	  
      		}  
      	}  
      }  
        
        
        
        
        
        
        
      arrayEventListeners = new Array("field1#keyup#checkFormFieldIsPositiveInt","field2#keyup#checkFormFieldIsPositiveInt");  
      function addEventListeners(arrayEventListeners) // v. 1.0.3  
      {  
      	// arrayEventListeners: "elementID#shortEvent#funtionName  
      	for(var i in arrayEventListeners)  
      	{  
      		var arrayEventListener = arrayEventListeners[i].split("#");		  
      		var functionReference = window[arrayEventListener[2]];  
      		if (document.addEventListener)  
      		{  
      			// allgemeine Ereignisbehandlung nach W3C  
      			document.getElementById(arrayEventListener[0]).addEventListener(arrayEventListener[1], functionReference, false);  
      		}  
       		else if (document.attachEvent)  
      		{  
      			// Spezielle Version für IE  
        	 	document.getElementById(arrayEventListener[0]).attachEvent("on" + arrayEventListener[1], functionReference);  
        	}  
        	else  
      		{  
        	  alert("Fehler");  
       	 }  
      	}  
      }  
      addEventListeners(arrayEventListeners);  
      
      

      dazu die HTML

        
        
        
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
      <html xmlns="http://www.w3.org/1999/xhtml">  
      <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
      <title>Unbenanntes Dokument</title>  
      </head>  
        
      <body>  
      <form action="" method="post" name="form">  
      <input id="field1" />  
      <input id="field2" />  
      </form>  
      <script type="text/javascript" src="./js.js"></script>  
        
      </body>  
      </html>  
      
      
      1. mein Code:

        einfacher wäre es, wenn du mal in die Fehlerkonsole gucken könntest.

        Struppi.

        1. Fehler: uncaught exception: [Exception... "Component returned failure code: 0x8000 4005 (NS_ERROR_FAILURE) [nsIStringBundle.GetStringFromName]"  nsresult: "0x8000 4005 (NS_ERROR_FAILURE)"  location: "JS frame :: chrome://vrs/content/vrsOverlay.js :: <TOP_LEVEL> :: line 58"  data: no]

          aus der Fehlerkonsole des FF.

          sagt mir nicht viel.

          1. aus der Fehlerkonsole des FF.

            sagt mir nicht viel.

            Die Stammt ja auch nicht von deinem Skript. wenn es keine Fehlermeldungen gibt, dann wird der event gar nicht aufgerufen?

            Struppi.

            1. Habe gerade bemerkt, dass der Event eigentlich ausgelöst wird, aber nicht wenn man ein einziges zeichen dass alleine in der inputbox steht löscht

              also z.b. ich gebe ein: a ->Event wird ausgelöst
              ich drücke Bachspace -> Event wird ausglöst

              aber tue ich nun folgendes:

              2x: ich gebe a ein-> event wird ausgelöst
              ich drücke das erste mal backspace - Event wird ausgelöst.
              ich drücke nocheinmal backspace -> Event wird nicht ausgelöst

              1. Sorry hab mist geschrieben.

                beim ersten besipiel wird der Event beim drücke der Backspace taste

                natürlich auch nicht ausgelöst

      2. mein Code:

        OK, ich hab mir jetzt doch mal eine Testseite damit gebaut, der code funktioniert einwandfrei. Nur deine alert() Meldung ist verwirrend, da sie nur erscheint, wenn man Backspace drückt, wenn die Länge der Eingabe mindestens zwei Zeichen lang ist.

        Struppi.

        1. das ist jetzt nämlich genau mein problem ..

          eigentlich soll der rand des feldes wieder schwarz werden wenn es leer ist

          1. das ist jetzt nämlich genau mein problem ..

            eigentlich soll der rand des feldes wieder schwarz werden wenn es leer ist

            Das musst du in deine Funktion einbauen. Was soll die Schleife den bewirken?

            Die Zeilen sind auch nicht sinnvoll:

                    if((formFieldID == "[object KeyEvent]") || (formFieldID == "[object KeyboardEvent]"))  
                    {  
                            formFieldID = formFieldID.target.id;  
                    }  
                    if(formFieldID == "[object Event]")  
                    {  
                            formFieldID = formFieldID.srcElement.id;  
                    }
            

            Du prüfst hier auf die Stringumsetzung eines Objektes, was nicht sehr zuverlässig ist.

            Zuverlässiger wäre es, wenn du auf die Eigenschaft testen würdest.

            var element = formFieldID.target || formFieldID.srcElement;  
            formFieldID = element.id;  
            
            

            Wobei ich formFieldID einen schlechten Namen für das Eventobjekt halte.

            Struppi.

            1. das ist jetzt nämlich genau mein problem ..

              eigentlich soll der rand des feldes wieder schwarz werden wenn es leer ist

              Das musst du in deine Funktion einbauen. Was soll die Schleife den bewirken?

              Die Zeilen sind auch nicht sinnvoll:

              if((formFieldID == "[object KeyEvent]") || (formFieldID == "[object KeyboardEvent]"))

              {
                              formFieldID = formFieldID.target.id;
                      }
                      if(formFieldID == "[object Event]")
                      {
                              formFieldID = formFieldID.srcElement.id;
                      }

              
              >   
              > Du prüfst hier auf die Stringumsetzung eines Objektes, was nicht sehr zuverlässig ist.  
              >   
              > Zuverlässiger wäre es, wenn du auf die Eigenschaft testen würdest.  
              >   
              > ~~~javascript
              
              var element = formFieldID.target || formFieldID.srcElement;  
              
              > formFieldID = element.id;  
              > 
              
              

              Wobei ich formFieldID einen schlechten Namen für das Eventobjekt halte.

              Struppi.

              dankeschön für die Tipps :)
              die for-schleife prüfte jedes zeichen, damit z.b. 1e+34 nicht als zahl interpretiert wird (exponentenschreibweise)
              sobald nur ein falsches zeichen auftaucht wird der border rot und die schleife birch ab (eine weitere prüfung ist ja nicht sinnvoll bzw. würde vorhandene fehler überschreiben, wenn danach noch eine zahl auftaucht)

              habe es nun folgendermaßen umgesetzt

                
                
              function checkFormFieldIsPositiveInt(formFieldID)  
              {  
              	var element = formFieldID.target || formFieldID.srcElement;  
              	formFieldID = element.id;  
              	  
              	if(document.getElementById(formFieldID).value == "")  
              	{  
              	  document.getElementById(formFieldID).style.border = "thin solid #000000";	  
              	}  
              	else  
              	{  
              		for(i = 0; i < document.getElementById(formFieldID).value.length; ++i)  
              		{  
              			alert('Event ausgelöst');  
              			if((document.getElementById(formFieldID).value.charAt(i) == ".") || (document.getElementById(formFieldID).value.charAt(i) == ",") || ((document.getElementById(formFieldID).value.charAt(i)  < "0") || (document.getElementById(formFieldID).value.charAt(i) > "9")))																																																																																																																		  		{  
              	  		document.getElementById(formFieldID).style.border = "thin solid #FF0000";	  
              				break;  
              			}  
              			else if((document.getElementById(formFieldID).value.charAt(i) == " ") || (document.getElementById(formFieldID).value.charAt(i) == "") || (document.getElementById(formFieldID).value == ""))  
              			{  
              				document.getElementById(formFieldID).style.border = "thin solid #000000";	  
              			}  
              			else  
              			{  
              				document.getElementById(formFieldID).style.border = "thin solid #000000";	  
              			}  
              		}  
              	}  
              }  
                
              
              
              1. das ist jetzt nämlich genau mein problem ..

                eigentlich soll der rand des feldes wieder schwarz werden wenn es leer ist

                Das musst du in deine Funktion einbauen. Was soll die Schleife den bewirken?

                Die Zeilen sind auch nicht sinnvoll:

                if((formFieldID == "[object KeyEvent]") || (formFieldID == "[object KeyboardEvent]"))

                {
                                formFieldID = formFieldID.target.id;
                        }
                        if(formFieldID == "[object Event]")
                        {
                                formFieldID = formFieldID.srcElement.id;
                        }

                
                > >   
                > > Du prüfst hier auf die Stringumsetzung eines Objektes, was nicht sehr zuverlässig ist.  
                > >   
                > > Zuverlässiger wäre es, wenn du auf die Eigenschaft testen würdest.  
                > >   
                > > ~~~javascript
                
                var element = formFieldID.target || formFieldID.srcElement;  
                
                > > formFieldID = element.id;  
                > > 
                
                

                Wobei ich formFieldID einen schlechten Namen für das Eventobjekt halte.

                Struppi.

                dankeschön für die Tipps :)
                die for-schleife prüfte jedes zeichen, damit z.b. 1e+34 nicht als zahl interpretiert wird (exponentenschreibweise)
                sobald nur ein falsches zeichen auftaucht wird der border rot und die schleife birch ab (eine weitere prüfung ist ja nicht sinnvoll bzw. würde vorhandene fehler überschreiben, wenn danach noch eine zahl auftaucht)

                habe es nun folgendermaßen umgesetzt

                function checkFormFieldIsPositiveInt(formFieldID)
                {
                var element = formFieldID.target || formFieldID.srcElement;
                formFieldID = element.id;

                if(document.getElementById(formFieldID).value == "")
                {
                  document.getElementById(formFieldID).style.border = "thin solid #000000";
                }
                else
                {
                for(i = 0; i < document.getElementById(formFieldID).value.length; ++i)
                {
                alert('Event ausgelöst');
                if((document.getElementById(formFieldID).value.charAt(i) == ".") || (document.getElementById(formFieldID).value.charAt(i) == ",") || ((document.getElementById(formFieldID).value.charAt(i)  < "0") || (document.getElementById(formFieldID).value.charAt(i) > "9")))    {
                   document.getElementById(formFieldID).style.border = "thin solid #FF0000";
                break;
                }
                else if((document.getElementById(formFieldID).value.charAt(i) == " ") || (document.getElementById(formFieldID).value.charAt(i) == "") || (document.getElementById(formFieldID).value == ""))
                {
                document.getElementById(formFieldID).style.border = "thin solid #000000";
                }
                else
                {
                document.getElementById(formFieldID).style.border = "thin solid #000000";
                }
                }
                }
                }

                
                >   
                  
                noch eine ergänzug zum namen formFieldID und zum event-objekt  
                  
                die funtktion bearbeitet nur das feld mit der übergebenen id.  
                das event-object enthält die auslösende id (zugriff variiert jenach browserr)
                
                1. noch eine ergänzug zum namen formFieldID und zum event-objekt

                  die funtktion bearbeitet nur das feld mit der übergebenen id.

                  Nein, übergeben wird ein Eventobjekt. Aus dem du die ID ermittelst, das geht einfacher.

                  das event-object enthält die auslösende id (zugriff variiert jenach browserr)

                  Genau. Aber du überprüfst nicht auf das Objekt, sondern auf den String, den der Browser daraus macht. Das kann aber alles möglich sein und ist daher sehr unzuverlässig.

                  Struppi.

              2. Struppi.

                Bitte zitiere nur das worauf du antwortest. Danke!

                die for-schleife prüfte jedes zeichen, damit z.b. 1e+34 nicht als zahl interpretiert wird (exponentenschreibweise)
                sobald nur ein falsches zeichen auftaucht wird der border rot und die schleife birch ab (eine weitere prüfung ist ja nicht sinnvoll bzw. würde vorhandene fehler überschreiben, wenn danach noch eine zahl auftaucht)

                Du meinst so:

                function checkFormFieldIsPositiveInt(evt){  
                	if(!evt) evt = window.event;  
                	var element = evt.target || evt.srcElement;  
                	var formFieldID = element.id;  
                	if(!element.value) {  
                		element.style.border = "";  
                	}else {  
                		var valid = new RegExp(/[^+0123456789]/);  
                		if(valid.test(element.value)) {  
                			element.style.border = "thin solid #FF0000";  
                		} else {  
                			element.style.border = "";  
                		}  
                	}  
                }  
                
                

                Struppi.

                1. Du meinst so:

                  function checkFormFieldIsPositiveInt(evt){

                  if(!evt) evt = window.event;
                  var element = evt.target || evt.srcElement;
                  var formFieldID = element.id;
                  if(!element.value) {
                  element.style.border = "";
                  }else {
                  var valid = new RegExp(/[^+0123456789]/);
                  if(valid.test(element.value)) {
                  element.style.border = "thin solid #FF0000";
                  } else {
                  element.style.border = "";
                  }
                  }
                  }

                  
                  >   
                  
                  Kannst du mal bitte die Syntax von diesem RegExp erklären? hab das nie verstanden
                  
                  1. Du meinst so:

                    function checkFormFieldIsPositiveInt(evt){

                    if(!evt) evt = window.event;  
                    var element = evt.target || evt.srcElement;  
                    var formFieldID = element.id;  
                    if(!element.value) {  
                      element.style.border = "";  
                    }else {  
                      var valid = new RegExp(/[^+0123456789]/);  
                      if(valid.test(element.value)) {  
                      	element.style.border = "thin solid #FF0000";  
                      } else {  
                      	element.style.border = "";  
                      }  
                    }  
                    

                    }

                    
                    > >   
                    > Kannst du mal bitte die Syntax von diesem RegExp erklären? hab das nie verstanden  
                      
                    Die eckige Klammer bedeutet, es ist eine Gruppe von Zeichen, hier also alle Zahlen und das Pluszeichen. Das komische Häckchen (wo bestimmt jemand den Namen von kennt) ^ ist eine Verneinung. Der Ausdruck prüft also ob eines der Zeichen nicht vorkommt.  
                      
                    Übrigens, wenn der IE nicht so blöd wäre oder du auf attachEvent verzichten würdest, könntest du in der Funktion auch einfach auf this zu greifen anstatt auf event.target oder event.srcElement  
                      
                      
                      
                    Struppi.