nicht angemeldet
Bei Texteingabe in input-Feld div einblenden
Hi,
ich habe ein Textfeld und möchte, dass bei Eingabe von Text ein div erscheint; habe schon rumprobiert, aber es klappt nicht so recht (bin leider auch nicht ganz fit in JS ...):
<script type="text/javascript">
function showtext()
{
if(document.getElementById('eingabe').value == "")
{
document.getElementById('textl').style.display = "none"; // oder auch style.visibility = "hidden";
}
else
{
document.getElementById('textl').style.display = "inline"; // oder auch style.visibility = "visible";
}
}
</script>
<input id="eingabe" type="text" onchange="showtext()" ... onkeyup="load()">
<div id="textl">
<a href="...">...</a>
<br>
<a href="...">...</a>
</div>
Wichtig wäre, dass style="display:inline;" gesetzt ist. onkeyup="load()" ist für eine andere Funktion (nur erwähnt, damit sich da nichts in die Quere kommt)
Und ideal wäre es, wenn das div wieder verschwindet, sobald man einen darin enthaltenen Link angeklickt hat.
Vielleicht hat ja jemand eine oder zwei Ideen :)
Danke.
-
es klappt nicht so recht
bedeutet, dass das div immer sichtbar ist, auch wenn das Feld nach dem Aufruf der Seite noch leer ist.
-
Du musst es vorher verstecken, entweder mit externem, inline-CSS oder einem entsprechenden JavaScript-Aufruf (wahlweise unterhalb des Objekts oder innerhalb einer window.onload-Funktion).
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes-
Du musst es vorher verstecken
Okay, das Einblenden klappt schon mal, danke:
<html> <head> <script type="text/javascript"> function showtext() { if(document.getElementById('eingabe').value == "") { document.getElementById('textl').style.visibility = "hidden"; } else { document.getElementById('textl').style.visibility = "visible"; } } </script> <style type="text/css"> #textl { visibility: hidden; display: inline; } </style> </head> <body> <input type="text" id="eingabe" onchange="showtext()"><br> <div id="textl"> <a href="#">Text</a><br> <a href="#">Text</a><br> <a href="#">Text</a><br> <a href="#">Text</a><br> </div> </body> </html>Allerdings wird das div erst angezeigt, wenn man nach der Eingabe mit der Maus neben das Eingabefeld klickt oder mit Tab rausspringt. Das ist natürlich doof. Geht das auch direkt während der Eingabe?
-
Okay - 2 Sekunden googlen: onKeyDown statt onchange tut's (fast) :)
Noch was anderes: lässt sich denn prüfen, ob innerhalb der div-Tags überhaupt etwas steht? Wenn dort nämlich nichts ist, müsste/sollte das div gar nicht eingeblendet werden. Das wäre eigentlich besser, als auf eine Eingabe im Textfeld zu prüfen.
Man gibt also was im Textfeld ein, per Ajax wird das div (evtl.) gefüllt, und wenn es Inhalte gibt, soll es angezeigt werden.
-
Mahlzeit Philipp.,
Okay - 2 Sekunden googlen: onKeyDown statt onchange tut's (fast) :)
Wobei ich dann eher "http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onkeyup@title=onkeyup" empfehlen würde.
Noch was anderes: lässt sich denn prüfen, ob innerhalb der div-Tags überhaupt etwas steht? Wenn dort nämlich nichts ist, müsste/sollte das div gar nicht eingeblendet werden.
Natürlich:
<script type="text/javascript">[code lang=javascript] function showtext(txt, div_id) { var div = document.getElementById(div_id); if (div) { if (txt.value == '') { div.style.visibility = 'hidden'; } else if (div.innerHTML != '') { div.style.visibility = 'visible'; } } }</script>
[...]
<input type="text" id="eingabe" onchange="showtext(this, 'textl');"><br>
<div id="textl">
<a href="#">Text</a><br>
<a href="#">Text</a><br>
<a href="#">Text</a><br>
<a href="#">Text</a><br>
</div>[/code]Man gibt also was im Textfeld ein, per Ajax wird das div (evtl.) gefüllt, und wenn es Inhalte gibt, soll es angezeigt werden.
Dann müsstest Du das <div> eher in der Funktion einblenden, die die Antwort des AJAX-Requests auswertet: wenn dort was zurückkommt und in das <div> eingefügt wird, kann es direkt angezeigt werden.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Wobei ich dann eher "http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onkeyup@title=onkeyup" empfehlen würde.
onkeyup verwende ich für den Ajaxaufruf, deswegen hab ich's hier nicht verwendet (oder könnte man damit theoretisch beides steuern?); hatte ich vergessen, nochmal dazuzuschreiben.
Natürlich:
Okay, hatte was ähnliches, was aber nicht klappt (JS-Fehler: Object Exptected in der input-Zeile):
<script type="text/javascript"> function showtext() { if(document.getElementById('textl')innerHTML.length != 0) { document.getElementById('textl').style.visibilty = "hidden"; } else { document.getElementById('textl').style.visibilty = "visible"; } } </script>Bei deiner Variante wird das div zwar korrekt eingeblendet, wenn man das Textfeld löscht, verschwindet es aber nicht mehr!?
Dann müsstest Du das <div> eher in der Funktion einblenden, die die Antwort des AJAX-Requests auswertet: wenn dort was zurückkommt und in das <div> eingefügt wird, kann es direkt angezeigt werden.
Hm .. klingt logisch, muss ich heute abend mal schauen, ob ich mich in dem Script zurechtfinde. Die aktuelle Variante würde mir aber schon fast genügen :)
-
Bei deiner Variante wird das div zwar korrekt eingeblendet, wenn man das Textfeld löscht, verschwindet es aber nicht mehr!?
Okay, mit onkeyup würde es klappen; ginge auch schneller. Bliebe nur das Problem, dass ich das ja schon für die load-funktion benutze.
-
Mahlzeit Philipp.,
(oder könnte man damit theoretisch beides steuern?);
Natürlich. Im HTML-Attribut "onkeyup" steht lediglich Javascript-Code, der beim Eintreten des Events ausgeführt wird. Dort können auch ZWEI Anweisungen bzw. Funktionsaufrufe notiert sein. Es könnte dort auch EINE Funktion aufgerufen werden, die dann wiederum die passenden Funktionen aufruft.
Okay, hatte was ähnliches, was aber nicht klappt (JS-Fehler: Object Exptected in der input-Zeile):
Was ist die "input-Zeile"?
function showtext()
Es ist meistens nicht sinnvoll, Funktionen so allgemein zu notieren. Nutze die Möglichkeit, durch Parameter "von außen" festzulegen, auf welche Elemente zugegriffen werden soll.
if(document.getElementById('textl')innerHTML.length != 0)
Da fehlt ein "." ...
Bei deiner Variante wird das div zwar korrekt eingeblendet, wenn man das Textfeld löscht, verschwindet es aber nicht mehr!?
Hm, ist ungetesteter Beispiel-Code ... dann musst Du wohl bei den if ()-Konstrukten etwas erweitern/herumbasteln.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Natürlich. Im HTML-Attribut "onkeyup" steht lediglich Javascript-Code, der beim Eintreten des Events ausgeführt wird. Dort können auch ZWEI Anweisungen bzw. Funktionsaufrufe
Stimmt natürlich :)
Was ist die "input-Zeile"?
Sorry, meinte die Zeile in der html-Datei, in der das Eingabefeld steht.
function showtext()
Es ist meistens nicht sinnvoll, Funktionen so allgemein zu notieren. Nutze die Möglichkeit, durch Parameter "von außen" festzulegen, auf welche Elemente zugegriffen werden soll.
Gibt's dadurch Nachteile? Ansonsten notier ich hier einfachdie Variablen, die in der Funktion verwendet werden?
-
Mahlzeit Philipp.,
»» function showtext()
»»
»» Es ist meistens nicht sinnvoll, Funktionen so allgemein zu notieren. Nutze die Möglichkeit, durch Parameter "von außen" festzulegen, auf welche Elemente zugegriffen werden soll.Gibt's dadurch Nachteile? Ansonsten notier ich hier einfachdie Variablen, die in der Funktion verwendet werden?
Ja, gibt es. Stell Dir vor, Du hast in einem Formular mehrere solcher Konstruktionen (Eingabefeld mit dazugehörendem <div>): dann müsstest Du für jede Kombinationen eine eigene Funktion schreiben, die dann alle fast gleich aussehen - das einzige, in dem sie sich unterscheiden, sind die Elemente, auf die zugegriffen wird.
Bessere Alternative: die variablen Teile einer Funktion, die außerhalb der Funktion beim Aufruf bereits bekannt sind, der Funktion als Parameter übergeben - wie in meinem Beispiel.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Bessere Alternative: die variablen Teile einer Funktion, die außerhalb der Funktion beim Aufruf bereits bekannt sind, der Funktion als Parameter übergeben - wie in meinem Beispiel.
Okay, ich werde das zukünftig mal berücksichtigen.
Damit ist zumindest die statische "Google Suggest"-Variante fertig :)
<html> <head> <script type="text/javascript"> function showtext(txt, textl) { var div = document.getElementById('textl'); if (div) { if (txt.value == "") { div.style.visibility = 'hidden'; } else if (div.innerHTML != "") { lis = document.getElementsByTagName('li').length; if (lis > 5) { div.style.height = '100px'; } else if (lis <= 5) { div.style.height = 20*lis + 'px'; } div.style.visibility = 'visible'; } } } </script> <script type="text/javascript"> function insert(lex) { document.getElementById('eingabe').value = lex; document.getElementById('textl').style.visibility = "hidden"; } </script> <style type="text/css"> #textl { visibility: hidden; width:199px; border:1px solid black; display:block; overflow-x: hidden; overflow-y: auto; } #eingabe { width:200px; } #textl a:link { color:#000; } #textl a:hover { color:#FFF; background-color:#39F; display:block; width:100%; } #textl ul { list-style-type:none; margin:0; } </style> </head> <body> <input type="text" id="eingabe" onkeyup="showtext(this, 'textl')"><br> <div id="textl"> <ul> <li><a lex="Anderer Text 1" href="#" onclick="insert(lex)">Text1</a></li> <li><a lex="Anderer Text 2" href="#" onclick="insert(lex)">Text2</a></li> <li><a lex="Anderer Text 3" href="#" onclick="insert(lex)">Text3</a></li> <li><a lex="Anderer Text 4" href="#" onclick="insert(lex)">Text4</a></li> <li><a lex="Anderer Text 5" href="#" onclick="insert(lex)">Text5</a></li> <li><a lex="Anderer Text 6" href="#" onclick="insert(lex)">Text6</a></li> <li><a lex="Anderer Text 7" href="#" onclick="insert(lex)">Text7</a></li> <li><a lex="Anderer Text 8" href="#" onclick="insert(lex)">Text8</a></li> </ul> </div> </body> </html>Jetzt muss ich daheim noch das Ajax-Script reinbasteln, was das div befüllt und fertig ist die Laube :D
Also vielen Dank für die ausführliche Unterstützung. Hat mir sehr geholfen!
-
Mahlzeit Philipp.,
Okay, ich werde das zukünftig mal berücksichtigen.
Du hast es noch nicht wirklich verstanden:
<input type="text" id="eingabe" onkeyup="showtext(this, 'textl')"><br>
Hier wird beim Loslassen einer Taste die Funktion "showtext()" aufgerufen. Diese bekommt zwei Parameter übergeben: einmal das Eingabeelement selbst und dann noch der String 'textl'.
function showtext(txt, textl)
{So sieht die entsprechende Funktionsdeklaration aus - der erste Parameter (das Eingabeelement als Objekt) wird in der Variablen "txt" gespeichert, während die Variable "textl" (wieso auch immer Du sie so genannt hast - ich fand meine Benennung "div_id" wesentlich sinnvoller) den String 'textl' enthält.
if (txt.value == "")
{Hier wird die Variable "txt" in der Funktion genutzt, um den Wert des Eingabeelements zu überprüfen.
Hingegen nutzt Du die Variable "textl" in der gesamten Funktion nicht. Wieso nicht? Dann brauchst Du ihren Wert auch nicht als Parameter zu übergeben.
Ich hatte sie an dieser Stelle
var div = document.getElementById('textl');
genutzt, um auf ein bestimmtes <div> zuzugreifen - so dass beim Funktionsaufruf bestimmt werden kann, welches <div> sich die Funktion greifen soll. Du hast diese Flexibilität allerdings wieder komplett zunichte gemacht, indem Du hier auf immer das selbe statische <div> zugreifst, da Du der Methode "getElementById()" immer den gleichen String als Parameter übergibst ... anstatt hier den zweiten Parameter der Funktion zu nutzen.
Weißt Du überhaupt, was Du tust? Oder probierst Du solange herum, bis zufällig ungefähr das passiert, was Du willst?
Damit ist zumindest die statische "Google Suggest"-Variante fertig :)
Nein, noch lange nicht:
lis = document.getElementsByTagName('li').length;
1. solltest Du globale Variablen vermeiden, wenn es nicht unbedingt zwingend notwendig ist, sie zu verwenden: informiere Dich über das Schlüsselwort "http://de.selfhtml.org/javascript/sprache/variablen.htm#definieren@title=var",
2. hast Du in dieser Auflistung ALLE <li>-Elemente - auch wenn in Deinem Dokument etwas mehrere <ul> oder <ol> enthalten sind ... ich bezweifle, dass das sinnvoll ist und dass es das ist, was Du willst.
function insert(lex)
{
document.getElementById('eingabe').value = lex;
document.getElementById('textl').style.visibility = "hidden";
}Hier wieder ein sehr schönes Beispiel einer IMHO sinnfreien Funktion. Einerseits ist der Funktionsname viel zu unklar (Was genau macht die Funktion eigentlich? Bist Du Dir sicher, dass Du das auch noch in einem halben Jahr weißt, OHNE den Code genau zu studieren?), andererseits ist sie nur für diese eine Kombination von Eingabeelement und <div> zu gebrauchen, da sie immer fest auf diese beiden zugreift - dabei könntest Du sehr einfach beim Funktionsaufruf bestimmen, welche Elemente manipuliert werden sollen:
function insert_eingabe(wert, txt_id, div_id) { var txt = document.getElementById(txt_id); var div = document.getElementById(div_id); if (txt && div) { txt.value = lex; div.style.visibility = 'hidden'; } }<li><a lex="Anderer Text 3" href="#" onclick="insert_eingabe(lex, 'eingabe', 'textl');">Text3</a></li>Übrigens: was steht in der Variablen "txt"? Woher kommt der Wert?
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Du hast es noch nicht wirklich verstanden:
Hätte mich auch gewundert ;-)
wieso auch immer Du sie so genannt hast - ich fand meine Benennung "div_id" wesentlich sinnvoller
Ich dachte zunächst, dass ich da die ID meines divs einfügen muss (div_id wäre quasi ein Platzhalter gewesen)
Weißt Du überhaupt, was Du tust? Oder probierst Du solange herum, bis zufällig ungefähr das passiert, was Du willst?
Naja .. so ungefähr schon. Ich bastel ca. 1 mal im Jahr an einer Seite, daher komme ich nie dazu, mich wirklich mit JS vertraut zu machen.
- solltest Du globale Variablen vermeiden, wenn es nicht unbedingt zwingend notwendig ist, sie zu verwenden: informiere Dich über das Schlüsselwort "http://de.selfhtml.org/javascript/sprache/variablen.htm#definieren@title=var",
Okay, akzeptiert.
- hast Du in dieser Auflistung ALLE <li>-Elemente - auch wenn in Deinem Dokument etwas mehrere <ul> oder <ol> enthalten sind ... ich bezweifle, dass das sinnvoll ist und dass es das ist, was Du willst.
Das hätte ich mitlerweile schon geändert, um nur die lis im textl-div zu zählen:
document.getElementById('textl').getElementsByTagName('li').length;Aber daran gibt's sicher auch was auszusetzen :-)
Übrigens: was steht in der Variablen "txt"? Woher kommt der Wert?
Die Listeneinträge im div kommen aus einer DB, die bei Eingabe im Textfeld mittels Ajax abgerufen werden. Das Script dafür ist von hier, da das ganze aber noch zu statisch ist, möchte ich das Eingabefeld + div etwas dynamischer gestalten (Einblenden des divs nur bei Ergebnissen aus der DB, Übernahme des Links ins Textfeld bei Klick usw.).
-
Mahlzeit Philipp.,
»» wieso auch immer Du sie so genannt hast - ich fand meine Benennung "div_id" wesentlich sinnvoller
Ich dachte zunächst, dass ich da die ID meines divs einfügen muss (div_id wäre quasi ein Platzhalter gewesen)
Nein, "div_id" war eine Variable, deren Bezeichnung ungefähr aussagt, was sie enthält - nämlich die ID eines <div>-Elements.
Das hätte ich mitlerweile schon geändert, um nur die lis im textl-div zu zählen:
document.getElementById('textl').getElementsByTagName('li').length;Aber daran gibt's sicher auch was auszusetzen :-)
Naja ... kommt darauf an, ob Du nur dieses eine <div> in Deine(r/n) Seite(n) hast. Ansonsten wäre es - wieder - ratsam, der entsprechenden Funktion per Parameter zu übergeben, unterhalb welches Elements gesucht werden soll.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Naja ... kommt darauf an, ob Du nur dieses eine <div> in Deine(r/n) Seite(n) hast. Ansonsten wäre es - wieder - ratsam, der entsprechenden Funktion per Parameter zu übergeben, unterhalb welches Elements gesucht werden soll.
Mehr gibbet nicht :)
Also, vielen Dank nochmal. Ich denke, für meine Bedürfnisse langt das :)
-
-
-
-
-
-
-
-
-
-
-
-