JS onkeydown auf dyn. Objekt setzen?

J

Jessy84

Grünschnabel
Hallo zusammen,

ich habe folgendes Problem, ich habe eine dreispaltige Tabelle, in der per Scanner Werte erfasst werden.

Dazu kommen zwei kleine JS - das erste soll beim Enter-Zeichen in das nächste Feld (bzw. die nächste Zeile) springen, das zweite soll eine neue (leere) Zeile anhängen.

Einzeln funktioniert das auch, aber sobald ich in den dynamisch angehängten Zeilen lande, funktioniert das erste JS nicht mehr, zumindest im Firefox, IE funktioniert.

Hier mal mein Script:
HTML: 
function EnterFocus(key)
{
	if(key==13)
	{
		Insert_Artikel(document.getElementById('Artikel_Window'));
		EB_Edit_Art_Menge_1.focus(); // Plazhalter
	}
}

function Insert_Artikel(Parent_Table)
{
// Definition der neu anzulegenden Elemente	
	var Art_TR = document.createElement("tr");
	var Art_TD_1 = document.createElement("td");
	var Art_TD_2 = document.createElement("td");
	var Art_TD_3 = document.createElement("td");
	var Art_TD_4 = document.createElement("td");
	var Art_Input_1 = document.createElement("input");
	var Art_Input_2 = document.createElement("input");
	var Art_Input_3 = document.createElement("input");

// Eigenschaften der neuen Elemente festlegen	
	Art_TR.title="Neuer Artikel";
	Art_Input_1.type="text";
	Art_Input_1.name="EB_New_Art_Artikelnummer[" + Artikel_counter + "]";
	Art_Input_1.id="EB_New_Art_Artikelnummer_" + Artikel_counter;
	Art_Input_1.onkeydown=function(){Test(event.keyCode)};
	Art_Input_2.type="text";
	Art_Input_2.name="EB_New_Art_Menge[" + Artikel_counter + "]";
	Art_Input_2.id="EB_New_Art_Menge_" + Artikel_counter;
	Art_Input_3.type="text";
	Art_Input_3.name="EB_New_Art_Servicenr[" + Artikel_counter + "]";
	Art_Input_3.id="EB_New_Art_Servicenr_" + Artikel_counter;

// Elemente aufbauen und verschachteln
	Art_TR.appendChild(Art_TD_1);
	Art_TR.appendChild(Art_TD_2);
	Art_TR.appendChild(Art_TD_3);
	Art_TR.appendChild(Art_TD_4);
		Art_TD_2.appendChild(Art_Input_1);
		Art_TD_3.appendChild(Art_Input_2);
		Art_TD_4.appendChild(Art_Input_3);

// Erstellte Elemente an Parent_Div anhängen und Zähler erhöhen	
	Parent_Table.appendChild(Art_TR);	
	Artikel_counter++;
}

Wenn ich im fest definierten input folgendes anhänge, kommt der Focus auch in das entsprechende Feld EB_New_Art_Artikelnummer_2:
//onkeydown="if(event.keyCode==13){EB_New_Art_Artikelnummer_2.focus();}"

im dynamischen Feld kann ich das so nicht eintragen, daher der Versuch über eine function. Allerdings bekomme ich im Firefox nun die Meldung "event is not defined" während es im IE funktioniert (jedenfalls der insert, der Focus lustigerweise nicht).

Was ich bisher rausbekommen habe ist, dass Firefox wohl event.keyCode nicht direkt unterstützt und man event.which nehmen soll, aber das funktioniert alles nicht bei mir. Nun hab ich 2 Stunden nach ner Lösung versurft und komme nicht weiter :(

Ich hoffe ihr könnt mir helfen oder zumindest ein bischen auf die Sprünge helfen.

Viele Grüße
Jessy :)
 
boah, wahnsinn, wenn ich das immer sehe denk ich nur ich spiel hier im Sand... aber erstmal vielen dank!
Ich bin gerade dabei und versuche das nachzuvollziehen... also deinen Nachtrag.
Im grunde ist deine funktion insertarticle quasi das gleiche, nur ein bischen eleganter ausgedrückt, oder?
Und im zweiten Teil wird ein listener, sprich eine trigger für die gesamte Tabelle erstellt, also sobald ich mich irgendwo im tbody der tabelle "article" befinde wird die eingabe abgefangen. und sobald man tab drückt und im feld mit der entsprechenden class steht, gibt's ne neue zeile.

Das funktioniert schonmal super ;)
Jetzt kommt nur mein großes Problem :D
Das sind ja Scanner-Eingaben, sprich da wird der Barcode-Inhalt gesendet und dann Enter gedrückt und nicht Tab, also code 13 statt 9. Ich bin jetzt noch nicht ganz sicher, wie man nun in deinem Code den Focus auf das nächste Feld legen kann...



/edit
so, habs jetzt folgendermaßen gelöst:
Code: 
function testfocus(parent)
{
	var feld=parent + (test_counter - 1);
	document.getElementById(feld).focus();
}
test_counter ist erstmal nur ein zähler, wahrscheinlich macht es mehr sinn, die zeilen der tabelle zu zählen, das muss ich mir aber auch gleich nochmal anschauen.
Ich hab jedem Feld nun eine ID mit dem Counter gegeben und im listener die function erweitert:

Code: 
    if ( code === 13 && !e.shiftKey && e.target.parentElement.classList.contains( "article-service-number" ) )     {
      insertArticle( table );
      testfocus( 'article_' );
    }
    if ( code === 13 && !e.shiftKey && e.target.parentElement.classList.contains( "article-number" ) )     {
      testfocus( 'plenty_' );
    }
    if ( code === 13 && !e.shiftKey && e.target.parentElement.classList.contains( "article-plenty" ) )     {
      testfocus( 'service_' );
    }

Ist wohl bischen hingeschustert wie alles andere von mir, aber im moment funktioniert es erstmal. Ich glaub ich muss mich wirklich etwas tiefer mit javascript befassen :eek:
 
Zuletzt bearbeitet:
Also ich habe das schon gesehen, dass du eine Lösung mit der Befehlstaste und nicht dem Tabulator suchst, jedoch habe ich gestern Abend nur unzureichende Lösungen dafür gefunden, weshalb ich diese auch nicht hier eingestellt habe. Falls ich heute noch dazu kommen sollte, dann melde ich mich noch einmal mit einer eleganten Lösung.

Nachtrag: Was so ein bisschen Schlaf doch ausmacht: http://jsbin.com/ilabox/4/edit#live (Wenn man die Umschalttaste gemeinsam mit der Befehlstaste drückt, kann man sich rückwärts durch die Felder bewegen.)
 
Zuletzt bearbeitet:
wow, danke, jetzt hab ich es sogar hinbekommen, dass ich in der richtigen Zeile stehe und den Counter nicht brauch, weil ich die Zeile auslese und alles supi und so und dann kommst du ;)

Allerdings funktioniert deine (zweite) Lösung nicht im IE, hab aber noch nicht rausbekommen warum.
Und dann ist mir jetzt noch ein größeres Problem aufgefallen, sobald ich Enter drücke, wird das Formular abgeschickt, wie fängt man das am besten ab? einfach aus dem "Submit" einen "button" machen, der das dann nur per click abschickt?
 
Vielleicht kannst du mal schauen, ob dir der IE eine Fehlermeldung ausgibt. Da ich Ubuntu nutze, habe ich leider keine Möglichkeit die Fehler im IE zu debuggen. Ansonsten habe ich das Problem jetzt dadurch gelöst, dass der Fokus beim Start auf dem ersten Eingabefeld liegt. Somit sollte bei Betätigung der Befehlstaste nichts abgesendet werden: http://jsbin.com/ilabox/9
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück