Ergebnis 1 bis 3 von 3
  1. #1
    carcophan ist offline Grünschnabel
    registriert
    18-12-2009
    Beiträge
    2

    Ein klassischer "im Mozilla.X gehts aber im IE nicht" JS Fall

    Hallo,

    mein Problem scheint irgendwie so speziell zu sein, dass Google mich nicht weiter bringt und die boardsuche auch nicht

    Jedenfalls folgendes:
    Ich habe eine Seite mit Formular das mit der Entertaste (keycode 13) navigierbar sein soll - also nach einem "Enter" in einem Feld soll das Formular nicht, wie in den meisten Browsern üblich, abgeschickt werden an den Server sondern zum nächsten Feld springen. Erst druch einen Click / Enter auf den Submit-Button soll das Formular dann weiterverarbeitet werden.

    Der folgende Code funktioniert in einem Mozilla-konformen Browser (konkret Firefox 3.5.6) und Opera 10.x einwandfrei. Nur IE 7&8 machen mal wieder zicken. Im IE, nachdem man in einem Feld auf "enter" drückt, springt der Focus auf den Submitknopf und der JS Debugger im IE 8 meldet
    Code:
    'document.forms.0.elements[...]' ist Null oder kein Objekt
    . Welche Stelle müsste für IE 7/8 angepasst werden (und wie?) damit es sich wie im Firefox / Mozilla verhält?

    JavaScript:
    HTML-Code:
    <script type="text/javascript">
    	 var maySubmit = false;
    	 function jump(event,elmnt,maySubmit)
    	 {
    		 this.maySubmit=maySubmit
    		 keycode = event.keyCode;
    		 var next=elmnt.tabIndex;
    			  if (keycode==13)
    			  {
    					document.forms[0].elements[next].focus();
    			  }
    	 }
    </script>
    HTML Form: (sorry - die HTML tags machen die formattierungen kaputt)
    Code:
    <form id="erfassen_form" name="myForm" onsubmit="if (maySubmit){alert('Submitting Form');return true;}else {return false;}" action="/testapp/submit.action" method="post">
    
    	 <table>
    	 
    			<tr>
    			  <td>E1</td>
    			  <td><input name="e1" size="1" maxlength="1" tabindex="1" id="e1" onkeydown="jump(event,this,false)" type="text"></td>
    			</tr>
    	 
    			<tr>
    
    			  <td>E2</td>
    			  <td><input name="e2" size="6" maxlength="6" tabindex="2" id="e2" onkeydown="jump(event,this,false)" type="text"></td>
    			</tr>
    		  
    			<tr>
    			  <td>E3</td>
    			  <td><input name="e3" size="9" maxlength="9" value="0" tabindex="3" id="e3" onkeydown="jump(event,this,false)" type="text"></td>
    			</tr>
    			
    			<tr>
    
    			  <td>E4</td>
    			  <td><input name="e4" size="9" maxlength="9" value="0" tabindex="4" id="e4" onkeydown="jump(event,this,false)" type="text"></td>
    			</tr>
    			
    			<tr>
    			  <td>E5</td>
    			  <td><input name="e5" size="9" maxlength="9"  value="0" tabindex="5" id="e5" onkeydown="jump(event,this,false)" type="text"></td>
    			</tr>
    
    	 </table>
    	
    	 <input id="erfassen_form_submit" name="method:submit" onkeydown="jump(event,this,true)" tabindex="6" value="Submit" type="submit">
    
    </form>

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.744

    AW: Ein klassischer "im Mozilla.X gehts aber im IE nicht" JS Fall

    onkeydown im Submit-Button entfernen - es gibt kein Element mit Index 6!
    Dann kann man aber das Formular nicht mehr absenden (kann man bei dir auch nicht durch klicken - nur durch Enter und da kommt dann der Fehler) - der ganze Aufbau ist nicht besonders gelungen; du solltest dich mal mit Event-Bubbling beschäftigen.

  3. #3
    carcophan ist offline Grünschnabel
    registriert
    18-12-2009
    Beiträge
    2

    AW: Ein klassischer "im Mozilla.X gehts aber im IE nicht" JS Fall

    ok - da war wohl meine boardsuche nicht effizient genug. Es hatten wohl schon einige Andere das Problem. Ich habe eine halbfertige Lösung (Enter Taste im Formular) gefunden und angepasst damit auch der Submit-Button auf "Enter" reagiert und das Formular abschickt. Der Alert ist raus und natürlich auch die richtige Reihenfolge Der Code funktioniert mit firefox 3.5.6 und Internet Explorer 8. Ich gehe einfach mal davon aus dass es also mit Chrome und Opera dann auch funktionieren wird.

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Beispiel</title>
    <script type="text/javascript">
    <!--
    var blah=0;
    
    document.onkeydown=function(e){
    	 
    		  txt=document.form1;
    		  if(!e)e=window.event;
    		  code=(e.keyCode)?e.keyCode:e.which;
    		  el=(e.srcElement)?e.srcElement:e.target;
    		  if(el.id=="submit_button"){
    		  		blah=0; return;
    		  }
    		  if(el.tabIndex){
    				tab=Number(el.tabIndex);
    				
    		  }
    		  
    		  if(code==13){
    				
    				for (var i=0;i<txt.length;i++){
    					 if(Number(txt[i].tabIndex)==(tab+1)){
    						  txt[i].focus();
    						  
    					 }
    				}
    				
    				blah=1
    				return false;
    		  }
    		  else blah=0;
    	 
    }
    //-->
    </script>
    </head>
    <body>
    <form name="form1" action="#" onsubmit="if(blah==1)return false;">
    <input name="text1" tabindex="1"><br>
    <input name="text2" tabindex="2"><br>
    <input name="text3" tabindex="3"><br>
    <input name="text4" tabindex="4"><br>
    <input name="text5" tabindex="5"><br>
    <input type="submit" name="sub" tabindex="6" onmousedown="blah=0;" id="submit_button">
    </form>
    </body>
    </html>

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •