Focus und <input type="image">

[Carlos Clemente]

Hallo zusammen

Ich arbeite an einer Applikation mit einem HTML GUI. Die gesamte Applikation besteht aus mehreren Screens die mit "Weiter" und "Zurück" (bis anhin normale <a><image></a>) miteinander verknüft sind. Die Steuerung wird mittels JAVA gelöst und ist nicht das Problem. Die Screens im GUI können in 2 Modi betrachtet werden. Im "Editmodus" können die Formulardaten eingegeben werden. Im "Viewmode" erscheinen dieselben HTML-Files mit den eingegebenen Files betrachtet werden. Doch sämtliche Form-Elemente sind deaktiviert, Focus darauf ist nicht möglich.

Für diese Applikation kamen 2 neue Anforderungen hinzu:
a) Automatischer Fokus auf das erste Formularfeld
b) "Weiter"-Button mit "Enter" jederzeit ansprechbar

Zu a)
Das Form kann beliebig viele "hidden"-felder beinhalten. Ebenfalls können textfelder, radiobuttons usw. disabled sein und textareas readonly (Eben der "Viewmode"). Das Problem wurde mit dem folgenden Script gelöst und funktioniert auch soweit.

//Automatischer Fokus auf das erste auswählbare/editierbare form-element welches weder disabled noch readonly ist
function fokussetzen() {
 //Gibt die Anzahl form-elemente zurück
 var anzahl = document.forms[0].elements.length;
 var arr = 0;
 var nothiddennr = new Array();
 //Checkt ob das aktuelle form-element entweder ein <select> ist welches nicht disabled ist (nötig, da selects IMMER readonly sind) oder ein anderes form-element ist welches nicht disabled oder read only ist und fügt die Resultate in ein array
 for (var i = 0; i < anzahl; i++) {
  if (((document.forms[0].elements[i].type == "select-one") && (document.forms[0].elements[i].disabled == false)) || ((document.forms[0].elements[i].type != "hidden") && ((document.forms[0].elements[i].readOnly == false) && (document.forms[0].elements[i].disabled == false)))) {
  nothiddennr[arr] = i;
  arr++;
  }
 }
 g = nothiddennr[0];
 //wenn array leer ist, script abbrechen
 if (g == undefined) {
  //alert(g)
  return(g)
  }
 //wenn array nicht leer, fokus auf das erste array element
 if (g != undefined) {
  //alert(g);
  document.forms[0].elements[g].focus();
 }
}

Zu b) Das "Weiter" button wurde als <input type="image" src="weiter.gif> eingebaut. <input type="image"> funktioniert ja im prinzip wie <input type="submit"> und kann mit der "Enter"-Taste angesprochen werden wenn sich der Cursor auf einem Formularfeld befindet.

Problem:
Im "Editmodus" ist es kein Problem da der Focus immer irgendwo gesetzt ist. Im "Viewmode" jedoch sind sämtliche Form-elemente entweder disabled, readonly oder hidden. Sprich, der Focus wird nirgends gesetzt und das ansprechen des Weiter-Buttons mit "Enter" funktioniert nicht. Ich dachte mein Script fängt das auf, da <input type="image"> den Focus auf das Erste Form-Element setzt, auf dem der Focus möglich ist. Doch dummerweise gilt <input type="image"> NICHT als formelement. Sprich es wird kein Focus gesetzt, "enter" funktioniert nicht.

Jemand eine Ahnung wie ich dieses Problem lösen könnte? Ich hab mich bemüht das Problem und das Tool an dem ich arbeite möglichst kurz zu beschreiben. Wenn jemand eine Frage dazu hat, kann er hier posten oder mir ein Email schreiben. Ich bin für jede Hilfe dankbar.

Gruss

Carlos

[Thomas Meinike]

Hallo,

Doch dummerweise gilt <input type="image"> NICHT als formelement. Sprich es wird kein Focus gesetzt, "enter" funktioniert nicht.

Vorschlag:
Gib dem input-Element mit dem Bild einen Namen, z. B. name="abc" und sprich es im Script an mittels:
document.getElementsByName("abc")[0].focus();

MfG, Thomas

[Carlos Clemente]

Hallo Thomas

Besten Dank!!!!

Deine Antwort hat mir geholfen das Problem zu lösen... ist ja eigentlich ganz einfach, wenn man weiss wie :o)

Nochmals Danke und Gruss

Carlos