Problem mit Focus auf Button im IE

[Florian]

Hallo alle miteinander.
Ich habe ein hier ein Konstrukt, welches eine Art Select nachbaut, ich bin mit dem Ergebnis auch ganz zufrieden. Nur ein Problem stört mich noch:
Wenn das nachgebaute Select offen ist, muss dort etwas angeklickt werden, damit es sich schließt. Ich hätte das gerne wie bei einem echten Select, also das quasi beim bluren das Select zugeht.
Hier erstmal eswas Code (um unwesentliches gekürzt):

this.doShowSpecialSelect = function(original){
  if(Display.selectWithSpecial!=null)
    Display.hideSpecialSelect();
  var temp = '<p id="ssoold" onclick="Display.hideSpecialSelect();" style="height:23px;white-space:nowrap;border:thin inset #DDDDDD;">'+
  Display.specializedObject.options[Display.specializedObject.selectedIndex].text+
  '<input onblur="setTimeout('Display.hideSpecialSelect()',100)" id="13erSpecialButton" type="button" style="height:18px;position:absolute;top:3px;right:2px;" value="&#62;"></p>';
  temp = temp + '<div style="border:1px solid #000000">';
  for(var i=0; i<Display.specializedObject.options.length; i++){
    temp = temp + '<p id="sso'+i+'" onclick="Display.processSpecialSelect(this)" onmouseover="Display.hoverSpecialOption(this)"' +
    ' onmouseout="Display.hoverSpecialOption(this)" style="white-space:nowrap;">' + Display.specializedObject.options[i].text +   '</p>';
  }
  temp = temp + '</div>';
  var coverDiv = document.getElementById('selectCoverFrame');
  var specialDiv = document.getElementById('13er_special');
  specialDiv.style.width = '20px';
  specialDiv.style.top = getY(Display.specializedObject)-295;
  specialDiv.style.left = getX(Display.specializedObject)-210;
  specialDiv.style.display = 'block';
  specialDiv.innerHTML = temp;
  var subEntries = specialDiv.getElementsByTagName('p');
  var targetWidth = 0;
  for(var i=0; i<subEntries.length; i++){
    if(jQuery(subEntries[i]).width() > targetWidth)
      targetWidth = jQuery(subEntries[i]).width();
  }
  targetWidth = targetWidth+22;
  document.getElementById('ssoold').style.width = targetWidth;
  Display.selectWithSpecial = Display.specializedObject;
  specialDiv.style.width = targetWidth;
  specialDiv.style.position = 'absolute';
  coverDiv.width = targetWidth;
  coverDiv.height = (subEntries.length*14)+11;
  coverDiv.style.position = 'absolute';
  coverDiv.style.top = getY(Display.specializedObject)-295;
  coverDiv.style.left = getX(Display.specializedObject)-210;
  Display.specializedObject.style.display = 'none';
  Display.specializedObject.disabled = true;
  jQuery(document.getElementById("13erSpecialButton")).focus();
}

Diese Function wird beim onfocus eines Select aufgerufen, wie gesagt, alles funktioniert, bis auf das Fokussieren des Button. Im FF und Safari gehts btw.

Danke für anregungen und Ratschläge.

[Edgar Ehritt]

Hallo,

gibts Du bitte einen Link an, weil...

Hier erstmal eswas Code (um unwesentliches gekürzt):

^^^^^^^^^^^^^^^^^^^^^^^^^^^
... ist nicht korrekt.

Gruß aus Berlin!
eddi

[Florian]

Was ich gekürzt habe sind ca 1200 Zeilen Coding außenrum. Ich kann keinen Link posten, da es sich hierbei um eine interne Applikation des Unternehmens handelt bei dem ich arbeite. Desweiteren ist mir noch etwas an der Sache aufgefallen:
Das ganze funktioniert in einem nahezu gleichen fall, und zwar dann, wenn ich ein Input, type text, einsetze, bei dem ein onclick Ereignis vorliegt welches das input Feld durch ein Select ersetzt, und dieses Select wird dann wiederum in diese Speziallösung verwandelt. Da ich aber (Gott sei Dank) um diese Uhreit nicht mehr auf der Arbeit bin folgt das Coding erst später.

Achja, wie gesagt, es ist eine Unternehmenslösung, d.h. ich hab keine 100%ige Freiheit was das Programmieren angeht, also bitte keine Hinweise wie "nutze FF" oder ähnliches. Die Applikation muss im IE laufen.

gibts Du bitte einen Link an, weil...

Hier erstmal eswas Code (um unwesentliches gekürzt):
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
... ist nicht korrekt.

...was soll ich daraus schließen? Gehst du davon aus, dass der Fehler nicht in dem von mir geposteten Codeausschnitt liegt? Wenn ja, wieso? Jeder Hinweis ist mir hier willkommen.

[Edgar Ehritt]

Re:

' onmouseout="Display.hoverSpecialOption(this)" style="white-space:nowrap;">' + Display.specializedObject.options[i].text +   '</p>';

Vermutlich hängt der Fehler mit der Methode hoverSpecialOption() zusammen. Mehr ist nicht zu sehen und darum auch nicht zu sagen.
BTW:

specialDiv.style.top = getY(Display.specializedObject)-295;
  specialDiv.style.left = getX(Display.specializedObject)-210;

specialDiv.style.top = getY(Display.specializedObject)-295 + "px";
   specialDiv.style.left = getX(Display.specializedObject)-210 + "px";

jQuery(document.getElementById("13erSpecialButton")).focus();

^^^^^^^^^^^^^^^^^^^^^
vgl.: (IDREF && HTML 4.01) || (XHTML 1.0 i.V.m. XML 1.0)

Gruß aus Berlin!
eddi

[Florian]

Danke für die Antworten.
Was mich an der Sache am meisten wundert ist halt, dass es funktioniert, wenn ich bevor ich die Funktion zum ersetzen des Select auslöse ein input Feld durch ein Select ersetze. Ich hatte gehofft, dass es da eine einfache Erklärung gibt, die mir partout nicht in den Sinn kommt. Ich werde mich heute auf der Arbeit nochmal damit auseinandersetzen, vielleicht kommt die Lösung ja auch von ganz allein ;-)

Re:

' onmouseout="Display.hoverSpecialOption(this)" style="white-space:nowrap;">' + Display.specializedObject.options[i].text +   '</p>';

Vermutlich hängt der Fehler mit der Methode hoverSpecialOption() zusammen. Mehr ist nicht zu sehen und darum auch nicht zu sagen.

Das ist die angesprochene Funktion. Leider gehts auch nicht, wenn ich den mouseevent temporär rausnehme.
this.hoverSpecialOption = function(option){
        if(option.style.backgroundColor != ''){
            option.style.backgroundColor = '';
            option.style.color = '#000000';
        }
        else{
            option.style.backgroundColor = '#4080C0';
            option.style.color = '#FFFFFF';
        }
    }

BTW:

specialDiv.style.top = getY(Display.specializedObject)-295;
  specialDiv.style.left = getX(Display.specializedObject)-210;
   specialDiv.style.top = getY(Display.specializedObject)-295 + "px";
   specialDiv.style.left = getX(Display.specializedObject)-210 + "px";

Danke, setze ich um, ich programmiere auch lieber sauber...

jQuery(document.getElementById("13erSpecialButton")).focus();
                                         ^^^^^^^^^^^^^^^^^^^^^

Was Ist damit?

[EKKi]

Mahlzeit Florian,

jQuery(document.getElementById("13erSpecialButton")).focus();
                                         ^^^^^^^^^^^^^^^^^^^^^
Was Ist damit?

Wenn Du die erklärenden Links gelesen hättest, wüsstest Du, dass IDs nicht mit einer Ziffer beginnen dürfen.

MfG,
EKKi

[Florian]

Ups, ich hatte zwar in den Text reingescheut, aber da ich auf der Arbeit sitze konnte ich mir grade nicht die Zeit nehmen es sorgfältig zu lesen. Und bei Querlesen ist mir das nicht aufgefallen.

Mahlzeit Florian,

jQuery(document.getElementById("13erSpecialButton")).focus();
                                         ^^^^^^^^^^^^^^^^^^^^^
Was Ist damit?

Wenn Du die erklärenden Links gelesen hättest, wüsstest Du, dass IDs nicht mit einer Ziffer beginnen dürfen.

MfG,
EKKi

[Gernot Back]

Hallo Florian,

Hallo alle miteinander.
Ich habe ein hier ein Konstrukt, welches eine Art Select nachbaut, ich bin mit dem Ergebnis auch ganz zufrieden. Nur ein Problem stört mich noch:
Wenn das nachgebaute Select offen ist, muss dort etwas angeklickt werden, damit es sich schließt.

Bei meinem Ansatz ist das nicht der Fall:

http://www.lernspielwiese.de/customselect/

Als ich allerdings auch noch die Scrollbar im gefaketen SELECT-Element "customizen" wollte, erlitt ich Schiffbruch.

Gruß Gernot

[Florian]

Ich habe den Fehler gefunden:
Das Element konnte den Focus nicht erhalten weil der Focus durch klick auf das originale Select noch im Select lag, dieses aber vor dem Focuswechsel gehidet und disabled wurde.

this.doShowSpecialSelect = function(original){

...

Display.specializedObject.style.display = 'none';
  Display.specializedObject.disabled = true;
  jQuery(document.getElementById("13erSpecialButton")).focus();
}

Folgendes hingegen funktioniert nun wunderbar:
this.doShowSpecialSelect = function(original){
  ...
  jQuery(document.getElementById("13erSpecialButton")).focus();
  Display.specializedObject.style.display = 'none';
  Display.specializedObject.disabled = true;

}