Ausfüllhilfe für User in einem Formular

snlilli

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

wernerdeluxe

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

jojo87

ein kleines Beispiel über javascript:

HTML

<html>
<head>
<title>Beispiel</title>
<script type="text/javascript" rel="javascript">
function showText(text, id) {
var target = document.getElementById(id);
target.innerHTML = text;
return;
}


function leave(id) {
var target = document.getElementById(id);
target.innerHTML = "";
}
</script>
</head>
<body>
<form action="" method="post">
<p>Postleitzahl: <input type="text" name="plz" onClick="showText('Sie geben gerade ihre Postleitzahl ein', this.name)" onBlur="leave(this.name)" /><span id="plz"></span></p>
</form>
</body>
</html>

Alles anzeigen

Viel Spaß,
jojo

snlilli

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 ?

jojo87

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

synaptic

HTML

<html>


<head>
  <title></title>
  <script type="text/javascript">
  function showHint(text, position){
  var textziel= document.getElementById("info");
  var wrapper = document.getElementById("infowrap");
  textziel.innerHTML=text;
  wrapper.style.top = position;
  wrapper.style.visibility="visible";
 
  }
  </script>

  <style type="text/css">
#info{
width:300px;
display:inline;
margin-left:-35px;


}


#infowrap{
position:absolute;
visibility:hidden;
margin-left:400px;
background: #FFFFCC;
border:1px solid #0FF000;
}
#infowrap img{
float:left;
position:relative;
top:3px;
left:-35px;
}


  </style>
</head>
<body>
<form action="" method="post">
<div id="infowrap" style="top:10px;"><img src="http://home.arcor.de/synaptic/hilfe/leftarrow1w.gif" width="35" height="15" alt="" border="0"><p id="info">Text, der vorerst nicht angezeigt wird</p></div>


<input type="text" name="inp_eins" id="inp_eins" size="20" onfocus="showHint('der Text der als info erscheinen soll<br />mit zeilenumbruch sogar', '15px');" />
<hr />


<input type="text" name="inp_zwei" id="inp_zwei" size="20" onfocus="showHint('der Text der als info erscheinen soll<br />mit zeilenumbruch sogar<br />und zeilenumbruch', '55px');" />
<hr />


<input type="text" name="inp_drei" id="inp_drei" size="20" onfocus="showHint('der Text der als info erscheinen soll<br />mit zeilenumbruch sogar<br />und zeilenumbruch<br />und mit zeilenumbruch<br />', '98px');" />
<hr />


<input type="text" name="inp_vier" id="inp_vier" size="20" onfocus="showHint('der Text der als info erscheinen soll<br />mit zeilenumbruch sogar<br />und zeilenumbruch<br />und mit zeilenumbruch<br />und zeilenumbruch', '135px');" />
<hr />


</form>
</body>
</html>

Alles anzeigen

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

jojo87

Synaptic, kansst du mir evtl. sagen, was an meinem Script oben nicht stimmt? Also IE bezogen?
Ich komm echt nicht drauf

synaptic

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"

Tags