Cursor in Tabellenzellen

[Thomas]

Liebe alle - ich arbeite immer noch an meinem kleinen Web-Sudoku-Spiel (URL oben). Unmittelbar nach den Eingaben in eines der Tabellenfelder (<input>) wird eine Funktion ausgeführt und die Tabelle neu aufgebaut, was den Fokus (Cursor) löscht. Danach setze ich ihn mittels cursor();

function cursor (b)
{
document.forms[0].elements[b].focus();
}

jeweils neu wieder ins Ausgangsfeld zurück (die Variable b wird von der Ursprungsfunktion übergeben). Das funktioniert sauber in Firefox 1.5.x (die Javascript-Konsole bleibt jungfräulich), und es läuft nicht die Spur in MSIE. Briefbombe an Bill Gates? Oder Asche über mein Haupt?

Vorab mittelgigantischen Dank! Thomas

[derletztekick]

Hallo Thomas,

und der IE meint, Dir keinen Fehler zu nennen?

Mit freundlichem Gruß
Micha

[Thomas]

und der IE meint, Dir keinen Fehler zu nennen?

Nein, Micha. Nicht das mindeste Fitzelchen einer Fehlermeldung. :-(

[derletztekick]

Hallo Thomas,

mein IE gibt mir bei folgendem Code eine Fehlermeldung:

  
 <script type="text/javascript">  
 function setForm(){  
 var F = document.createElement("form");  
 var I = document.createElement("input");  
 F.appendChild(I);  
 I.type = "text";  
 I.name = "test";  
 I.value = "Inhalt"  
 document.getElementsByTagName("div")[0].replaceChild(F,document.getElementsByTagName("div")[0].firstChild);  
 cursor(I.name);  
 }  
  
 function cursor (b){  
 alert(document.forms[0].elements[0].name)  //test  
 alert(document.forms[0].elements[0].value) //Inhalt  
 alert(document.forms[0].elements[b].value) //unbekannt  
  
 }  
 window.onload = setForm;  
 </script>

Sprech ich das Eingabefeld mit seinem Namen an, erhalte ich eine Fehlermeldung, dass das Formular mit diesem Element nicht existiert.

Rufe ich Deine Funktion mit einem nummerischen Wert auf, so funktioniert es auch im IE. Da muß wohl mal ein anderer mit mehr Weitsicht ran, einen Fehler kann ich zumindest auf die Schnelle nicht erkennen.

Mit freundlichem Gruß
Micha

[Thomas]

Da muß wohl mal ein anderer mit mehr Weitsicht ran, einen Fehler kann ich zumindest auf die Schnelle nicht erkennen.

Hallo Micha - auch wenn ich nun so schlau bin als wie zuvor: Ich bin beeindruckt. Echt. Sowohl von Deiner Site als auch vom Aufwand, den Du zur versuchten Beantwortung meiner Frage getrieben hast. Hab Dank!

[derletztekick]

Hallo Thomas,

auch wenn ich nun so schlau bin als wie zuvor:

Ja, nicht so schön...

Ich habe es mal weitergetrieben: Wenn das Formular schon im Quellcode steht, funktioniert alles erwartungsgemäß.

Füge ich ein:
<form><input name="test" value="TEST-TEXT" type="text">

zu meinem Bsp dazu und ändere die Funktion entsprechend ab:

  
 function cursor (b){  
 //alert(document.forms[0].elements[0].name)  
 alert(document.forms[1].elements[b].value)  
 }

erhalte ich "TEST-TEXT", wenn ich sie mit cursor(I.name) aufrufe. I.name ist "test" und identisch mit dem aus JS erzeugten Element - siehe vorheriges Beispiel.

Ich weiß, das bringt Dich erstaml auch nicht weiter. Ist es denn möglich, das Du den nummerischen Index ansprichst? Dazu könntest Du Dir ggf auch eine Funktion zum suchen schreiben. So in etwa:

  
 function searchElement(n){  
   var EL = document.forms[0].elements;  
   for (var i=0;i<EL.length; i++)  
     if (n==EL[i].name)  
    return i;  
    return false;  
 }  
  
 function cursor (b){  
 alert(b+"  "+searchElement(b))  
 if (searchElement(b)!==false)  
   alert(document.forms[0].elements[searchElement(b)].value)  
 }  
 window.onload = setForm;  
 }

Das solltest Du jedoch noch etwas verfeinern, gerade der doppelte Funktionsaufruf ist schlecht!

Der IE g

Mit freundlichem Gruß
Micha

[Thomas]

Ich bin nicht ganz sicher, ob ich Dich richtig verstanden habe, Micha. Aber Deine vorgeschlagene Prüffunktion hat mich auf folgendes gebracht: Ich habe ganz einfach mittels

alert (document.forms[0].elements[b].value);

in der entsprechenden Funktion überprüft, ob das Element[b] korrekt angesprochen wird. alert() gibt mir den korrekten Wert zurück, also muss das Element korrekt angesprochen sein. Es kann m.E. also nur an focus() liegen, in

document.forms[0].elements[b].focus();

Und das will mir einfach nicht in den Kopf... (Was natürlich ohne weiteres am Kopf liegen mag. :-)

Das ganze Skript übrigens liegt auf http://www.mah-jongg.ch/sudoku/source.js

[derletztekick]

Hallo Thomas,

Ich habe ganz einfach mittels

alert (document.forms[0].elements[b].value);

in der entsprechenden Funktion überprüft, ob das Element[b] korrekt angesprochen wird. alert() gibt mir den korrekten Wert zurück

Tut es das? Also bei mir nicht. Zunächst erhalte ich einen JS Fehler, das td nicht definiert sei (~45. Zeile). Hole ich das global nach, folgt das Array num - auch das füge ich global zu. Danach erhalte ich im FF einen Fehler, das:

Fehler: document.forms[0].elements[b] has no properties
Quelldatei: file:///C:/source.js
Zeile: 71

Da Du schriebst, Du könntest das VALUE auslesen, hatte ich es wie folgt versucht:

  
alert(b+"  "+document.forms[0].elements[b].value);  
document.forms[0].elements[b].focus();

Der Fehler kommt aber bereits beim alert(). Der übergebene Parameter ist im übrigen eine Ziffer.

Da Du Deine Tabelle mittels innerHTML hinzufügst, bin ich mir nicht sicher, ob dabei die Elemente nicht zerstört werden.

Ggf ist beim speichern im FF etwas verloren gegangen. Das würde zumindest erklären, warum die index.html mehr Inhalt (eine ganze Tabelle) enthält gegenüber Deinem Onlinebeispiel.

Mit freundlichem Gruß
Micha

[Thomas]

Ggf ist beim speichern im FF etwas verloren gegangen. Das würde zumindest erklären, warum die index.html mehr Inhalt (eine ganze Tabelle) enthält gegenüber Deinem Onlinebeispiel.

Eigenartig, eigenartig, lieber Micha: Erst mal hab Dank für Deine Mühe! Tatsächlich aber wirft mein IE keinerlei Fehlermeldung aus; td und num, die beiden Kern-Arrays des Ganzen, scheinen absolut sauber definiert zu sein. Unnötig zu sagen, dass die JS-Konsole des FF auch nichts ausgibt. Möglicherweise weist das von Dir im FF abgespeicherte Skript tatsächlich Lücken auf (wäre mir allerdings noch nie untergekommen). Daher: Mein Spiel setzt sich aus vier Dateien zusammen:

http://www.mah-jongg.ch/sudoku/index.html
http://www.mah-jongg.ch/sudoku/source.js
http://www.mah-jongg.ch/sudoku/format.css
http://www.mah-jongg.ch/sudoku/bg.jpg

Noch etwas zu meinem Ursprungsproblem - gestern abend habe ich eine Reihe anderer Browser auf Mac OS X angeworfen: Safari (mit unvollständiger Unterstützung von CSS-Eigenschaften, vgl. http://forum.de.selfhtml.org/?t=134734&m=874206), Camino 1.0.2 und FF 1.5.x für Mac. Alle, auch Safari, haben mit meiner eingangs dargestellten focus()-Funktion nicht das geringste Problem. Jetzt bin ich mit meinem Latein wirklich am Ende. Trotzdem herzlich, Thomas

[derletztekick]

Hallo Thomas,

ich will nicht wissen, was mein FF gestern gespeichert hat, als ich Deine index ganz normal gespeichert habe (und dabie automatisch Script und CSS mitgezogen habe).

Warum der Focus nicht kommt, weiß ich nicht. Er scheint noch nicht fertig zu sein und verliert diesen wieder?!

Abhilfe schafft ein: document.forms[0].elements[b].select(); im IE. Das setzt nicht nur den Focus, sondern selektiert den Eintrag auch - letzteres ist zwar nicht erforderlich aber naja ;)

Komischerweise passt der Hinweis aus der Doku nicht so recht: "Dort wird zunächst mit document.Testform.Code.focus() auf das Formularfeld positioniert. Denn das Selektieren von Text ist nur möglich, wenn das Feld den Focus hat."

Demnach hat der IE den Focus korrekt auf das Feld gelegt, da sonst select() nicht möglich wäre - verwirrend.

Mal etwas anderes, warum erzeugst Du Dein Script nicht via DOM. Dann hättest Du eine Referrenz auf Deine Zellen und müsstest auch den Fokus auf diese lenken können - behaupte ich einfach mal?

Mit freundlichem Gruß
Micha

[Thomas]

Dieses Rätsel, lieber Micha, werden wir wohl ganz einfach nicht lösen können. Ich hab' noch etwas rumprobiert (document.forms[0].elements[b].focus() ist jetzt die allerallerletzte auszuführende Anweisung nach einer Zifferneingabe), allein, ohne Erfolg. Im Gegenteil: Wenn ich focus() mittels setTimeout verzögere, kann ich alle von Dir genannten Fehler reproduzieren. Hier weiss ich nun wirklich nicht mehr weiter.

Mal etwas anderes, warum erzeugst Du Dein Script nicht via DOM. Dann hättest Du eine Referrenz auf Deine Zellen und müsstest auch den Fokus auf diese lenken können - behaupte ich einfach mal?

Warum? Nun - peinlich: weil ich nach wie vor ein Javascript-Dilettant bin. Meine beiden Spiele

www.mah-jongg.ch
www.mah-jongg.ch/sudoku

entstanden und entstehen mittels trial&error. Und wie figura zeigt, eben nur allzu häufig mittels error. Aber ich werd' mir das aufs Panier schreiben - die ganze Anzeige mittels eines kruden

document.getElementById("Id").innerHTML=var;

zu erzeugen, ist zugegebenermassen plump. Ich werd' mich dahinterklemmen. Und noch was - danke!

[derletztekick]

Hallo Thomas,

Dieses Rätsel, lieber Micha, werden wir wohl ganz einfach nicht lösen können.

Nein, aber man darf doch sicher nach Alternativen suchen ;) Select() hat Dir also nicht zugesagt? (ich kann es verstehen aber nur für den IE könnte ich mit leben)

Im Gegenteil: Wenn ich focus() mittels setTimeout verzögere, kann ich alle von Dir genannten Fehler reproduzieren.

Das ist doch die Idee - hätte ich auch drauf kommen sollen. Ich habe es probiert und muß sagen: Funktioniert super[tm].

Deine eigenständige Funktion benötigst Du nicht mehr, da Du ja enter() bereits den Wert übergibst. Ich habe daher am Ende dieser Funktion ein TimeOut von 0,5sek eingefügt und nun gehts auch im IE:

  
function enter(b)  
{  
a=document.forms[0].elements[b].value;  
if (a>0&&a<10)  
{  
td[b]="<input type=\"text\" autocomplete=\"off\" id=\"form"+color[0]+"\" size=\"1\" maxLength=\"1\" value=\""+a+"\" onkeyup=\"javascript:enter("+b+");\">";  
num[b]=a;  
message="Number entered.";  
show();  
cursor(b);  
}  
else if (a=="")  
{  
td[b]="<input type=\"text\" autocomplete=\"off\" id=\"form"+color[0]+"\" size=\"1\" maxLength=\"1\" value=\"\" onkeyup=\"javascript:enter("+b+");\">";  
num[b]=a;  
message="Number cleared.";  
show();  
cursor(b);}  
else  
{  
td[b]="<input type=\"text\" autocomplete=\"off\" id=\"form"+color[0]+"\" size=\"1\" maxLength=\"1\" value=\"\" onkeyup=\"javascript:enter("+b+");\">";  
num[b]="";  
message="Only numbers 1-9 allowed!";  
show();  
cursor(b);  
}  
window.setTimeout('document.forms[0].elements["'+b+'"].focus();', 500);  
  
}

Warum? Nun - peinlich: weil ich nach wie vor ein Javascript-Dilettant bin.

Och, das würde ich nicht sagen, soviel besser bin ich sicher auch nicht - wenn man das überhaupt messen kann.

Meine beiden Spiele

www.mah-jongg.ch
www.mah-jongg.ch/sudoku

Mein eines Spiel: Tetris JavaScript...

document.getElementById("Id").innerHTML=var;

Das hatte ich auch am Anfang immer, bis es nicht mehr gehen wollte und ich mich mit "den anderen" mal befassen musste ;)

Und noch was - danke!

Keine Ursache!

Mit freundlichem Gruß
Micha

[Thomas]

Hallo Micha

Deine eigenständige Funktion benötigst Du nicht mehr, da Du ja enter() bereits den Wert übergibst. Ich habe daher am Ende dieser Funktion ein TimeOut von 0,5sek eingefügt und nun gehts auch im IE:

Die eigenständige Funktion hatte ich auch schon eliminiert, und hätte ich Hirni wie Du

setTimeout('document.forms[0].elements["'+b+'"].focus();', 500);

notiert statt bloss (und falsch) ...elements[b].focus();..., dann wär's gelaufen. Spitze. Danke, Micha. Die Sache ist erledigt, hochgeladen und läuft.

Mein eines Spiel: Tetris JavaScript...

hat's in sich. Wunderbare Variante. Herrlich spartanisch, so wie ich Spiele eben mag. Let's keep up the good work - und tragen wir Sorge zu diesem Forum. Besser geht nicht. :-)

[derletztekick]

Hallo Thomas,

schön, das es funktioniert - freut mich. Weiterhin viel Erfolg und vor allem Spaß!

Mit freundlichem Gruß
Micha