Mueschbeck: Dynamische Wertehilfe

Hi,

was will ich bauen?
ich möchte eine Wertehilfe für eine Texteingabe basteln. Da das Formular aus einer Menge an Eingabefeldern besteht, soll die Eingabehilfe dynamisch hinzugefügt werden (zudem auf andere Z-Ebene um Layout nicht zu verändern). Durch Klicken mit der Maus auf einen Eintrag in der Wertehilfe (optimal wäre auch noch per Key später) soll der Text im Eingabefeld modifiziert werden.

was mir den Kopf zerbricht?
1.) ich bin nicht in der Lage ein dynamisch erzeugtes SPAN Tag mit Text zu füllen. Das geht mit Inpputfeldern, Button,... nur nicht mit Div und Span
2.) das Span Tag reagiert nicht auf onmousedown events. Auch onclick Events funktionierten nicht bei Buttons.

gekürzter Beispielcode:
<html>
<head><title>ValueHelp-Test</title>
<script type="text/javascript">
 var mPreviousHelp = null;

function addKeyHelpPanel(fieldId, keyHelpId)
 {
  removePreviousKeyHelpPanel();

var field = document.getElementById(fieldId);
  var box = document.getElementById(fieldId + '.box');

var spanTag = document.createElement('SPAN');
  spanTag.id = fieldId + ".keyHelp";

var keyTag = document.createElement('SPAN');
  keyTag.value = "test";
  keyTag.className = "keyhelpBox";
  keyTag.onmousedown="alert('klick')";

spanTag.appendChild(keyTag);

mPreviousHelp = spanTag;
  box.appendChild(spanTag);
 }

function removePreviousKeyHelpPanel()
 {
  if(mPreviousHelp == null)
   return;

var parentBox = mPreviousHelp.parentNode;

parentBox.removeChild(mPreviousHelp);
 }
</script>
</head>
<body>
<span id="sp0.box"><input type="text" id="sp0" name="sp0" onfocus="addKeyHelpPanel('sp0', 0);""/></span>
<span id="sp1.box"><input type="text" id="sp1" name="sp1" onfocus="addKeyHelpPanel('sp1', 0);""/></span>
</body>
</html>

-------------------------------

Hoffe, es kann mir jemand weiterhelfen, da ich eigentlich schon so einiges ergoogelt und probiert hab.

Vielen Dank vorab,
Micha

  1. hi,

    1.) ich bin nicht in der Lage ein dynamisch erzeugtes SPAN Tag mit Text zu füllen. Das geht mit Inpputfeldern, Button,... nur nicht mit Div und Span

    Natürlich, die haben ja auch kein "value" - sie können Kindelemente haben, beispielsweise Textknoten. Und einen solchen willst du wohl - also erzeuge ihn ebenfalls (document.createTextNode), und hänge ihn in den Span ein.

    2.) das Span Tag reagiert nicht auf onmousedown events.

    Du weist lediglich einen String zu - die Eventhandler erwarten beim Setzen per Javascript aber eine Funktionsreferenz.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hi,

      1.) ich bin nicht in der Lage ein dynamisch erzeugtes SPAN Tag mit Text zu füllen. Das geht mit Inpputfeldern, Button,... nur nicht mit Div und Span

      Natürlich, die haben ja auch kein "value" - sie können Kindelemente haben, beispielsweise Textknoten. Und einen solchen willst du wohl - also erzeuge ihn ebenfalls (document.createTextNode), und hänge ihn in den Span ein.

      innerHTML sollte auch funktionieren.

      mfG,
      steckl

      1. Hey,

        vielen Dank an euch beide. Ich habe zuvor schon versucht ein TextElement zu erzeugen, jedoch funktionierte da der Eventhandler ebenfalls nicht. Ich werde beide Ansätze mal versuchen wobei der innerHTML der schnellere zur Lösung des Problems sein dürfte (das kannte ich noch nicht...).

        Micha

        1. Hey,

          vielen Dank an euch beide. Ich habe zuvor schon versucht ein TextElement zu erzeugen, jedoch funktionierte da der Eventhandler ebenfalls nicht. Ich werde beide Ansätze mal versuchen wobei der innerHTML der schnellere zur Lösung des Problems sein dürfte (das kannte ich noch nicht...).

          Micha

          innerHTML() halte ich für eine schlechte Idee. Viele, aber nicht alle Browser kopieren diese MS-Idee zwar, aber Standard ist DOM (createElement(), createTextNode()) und nicht innerHTML().

          Warum willst Du Dich unnötig auf IE und IE-Nachbauten einschränken?

          Alexander