Ausfüllhilfe für User in einem Formular

  • Hi all,

    ich habe auf meiner Seite ein Formular laufen, welches ich gerne mit "Hilfekommentaren" für die Nutzer ergänzen möchte.

    Als am besten erscheint mir unter allen Möglichkeiten so etwas zu realisieren, die Art wie Yahoo das gemacht hat.

    Wenn man zb. in das Feld für die Postleitzahl klickt, erscheint nebenstehend der Text "Über die Postleitzahl kann Yahoo! Ihnen den Webinhalt anbieten, etc" und sobald man das Feld wieder verlässt ist der Text wieder weg. Somit ist die Hilfe also nur dann sichtbar, wenn man sie auch braucht.

    Das finde ich super und hätte dieses Feauture auch gerne auf meiner Seite. Problem ist, dass ich aber leider nicht wie das am besten umzusetzten ist.

    Hoffe hier kann jemand helfen !
    Gruß
    Lilli

  • Hm, ich kann dir nicht viel Weiterhelfen. Ich kann dir nur sagen:

    Läuft über javaScript und Css.

    Das JavaScript merkt, wenn der User in das Feld klickt und über CSS wird dann das Infofenster sichtbar.


    Gruß
    Lukas

    Maybe this world is another planet's hell

  • ein kleines Beispiel über javascript:

    Viel Spaß,
    jojo


  • wahrscheinlich seh ich den wald vor lauter bäumen nicht,
    aber wenn ich deinen code al htm. speicher und im ie öffne, seh ich zwar das Formularfeld aber nicht den Text "Sie geben gerade ihre Postleitzahl ein". Was mach ich falsch ?

  • Hm, du hast recht, im ie funktioniert es tatsächlich nicht.
    Entschuldige, ich habs da gar nicht getestet (hab mir den ie jetzt erst extra installiert).
    da bin ich jetzt auch etwas überfragt.......
    Vielleicht kann einer der js-Experten da mal nen Blick drauf werfen.

    Übrigens: Man kann das Ganze auch mit css lösen:

    HTML
    <form action="" method="post">
    <p class="input"><input type="text" name="wasauchimmer" size="20" /><span>Text, der vorerst nicht angezeigt wird</span></p>
    </form>

    und das CSS:

    HTML
    p.input {
    width: 150px; /*Anpassen, bis Text nicht mehr zu sehen ist*/
    overflow: hidden;
    }
    
    
    p.input:hover {
    width: auto;
    }

    Allerdings geht dies im IE6 auch nur mit der Js-Krücke von Son of Suckerfish
    Aber der Vollständigkeit halber sei es trotzdem erwähnt.

    Gruß,
    Jojo


    2 Mal editiert, zuletzt von jojo87 (27. September 2008 um 11:15) aus folgendem Grund: Ergänzung

  • musste halt nur messen wie die abstände von oben sind.. so haste nur ein einziges div und kloppst da den inhalt rein..
    code mit ie und ff getestet
    evtl müsste das script noch wat erweitert werden, damit die position nach browser angepasst wird

  • naja du hast nen span der die id plz hat und nen input, der den namen plz hat damit haste fast schon zwei elemente mit derselben bezeichnung(grob gesagt) an sich sollte ja id und name voneinander getrennt sein, was der liebe IE nich so ganz kapiert. jetzt versuchst du über diese scheinbar gleiche referenz das zweite objekt zu packen, da schnallt der ie dann ab und schmeisst nen laufzeitfehler.

    also ich bin jetzt auch nur durch probieren zu diesem ergebnis gekommen.. wenn der input nen anderen namen hat und man das plz als id im funktionsaufruf in hochkomma setzt klappt es :o)

    nich vergessen: "nie etwas einfacher machen, als es schon ist^^-zumindest wenns schon stark reduziert wurde.... hrhrhr"