ein <div> an ein <input> unten anhängen

[Schneider]

Hi

Ist es möglich ein <div> Container direkt unter einem Input ranzuhängen (so in etwa wie ein Dropdown Menü)

Ich würde gerne ein ganz normalen Input vom type Text einfügen und wenn ich dort etwas eintippe (zB ein a) sollte ein definiertes Div direkt unter dem Input erscheinen

Ist das möglich

PS: Ich will auf keinen Fall ein Dropdown Menü verwenden

Danke schön

 

[pit-r]

Moin!

<input style="width:100px" onkeyup="document.getElementById('div').style.display=this.value==''?'none':'block'">
<div style="width:100px;display:none;border:1px solid black;" id="div">blah</div>

Ahoi - Pit

 

[shf10105]

@pit-r
Also ich glaube, dass er eher ein absolutes DIV meint :

JS :

function show(el)
{
 var obj = document.getElementById('div');
 obj.style.left = (el.offsetLeft)+"px";
 obj.style.top = (el.offsetTop+el.offsetHeight)+"px";
}

und onKeyUp Event im Input-Element :

onkeyup="show(this);"

Sowie im style des divs display:none; weglassen und position:absolute; einfügen.

 

[pit-r]

Mag ja sein.

Du solltest allerdings zum einen noch Einheiten vergeben und zum anderen berücksichtigen, daß der input kein unmittelbarer Kindknoten des bodys sein könnte.

 

[Schneider]

wow danke für die flotte Antwort !!!

jetzt habe ich noch ein kleines Problemchen mit frage

ich habe nun mehrere Inputs untereinander
ist es möglich den erscheinenden div über die input drüber zu legen?

Ich glaube das angehängte Bild erklärt besser was ich versuche zu erklären!




edit:
@shf10105 danke auch für deine Hilfe aber so wie es pit-r geschrieben wollte ich es auch haben

 

[shf10105]

Du solltest allerdings zum einen noch Einheiten vergeben und zum anderen berücksichtigen, daß der input kein unmittelbarer Kindknoten des bodys sein könnte.

Was meinst du mit unmittelbarer Kindknoten des bodys. Redest du von parentOffset rekursiv abarbeiten. Das ist in diesem einfachen Beispiel nicht nötig oder worum gehts?

 

[Schneider]

ist das was ich oben abgebildet habe technisch überhaupt lösbar ???
Danke für eure Hife

 

[dkdenz]

Es gibt da die nette z-index-Eigenschaft: z-index: Überlappung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[slayer2206]

Klar geht das. Du musst das DIV absolut positionieren. Dazu musst Du die Position des dazugehörigen <inputs auslesen (Gibt's hier schon einiges im Forum), dann benutzt Du diese Koordinaten und addierst zum Y-Wert noch die Höhe des Input-Felds hinzu.

Allerdings solltest Du bedenken, dass es ohne Benutzung der TAB-Taste nicht sonderlich praktisch ist, wenn Formularfelder überdeckt sind...

Als Hilfestellung hier die Funktion, die die Position des übergebenen Elements ausliest:

function getElementPos(element)
{
	var left	= 0;
	var top		= 0;
	while (element.tagName != 'BODY')
	{
		top	= top + element.offsetTop;
		left = left + element.offsetLeft;			
		element = element.offsetParent;
	}
	return new Array(left, top);
}

 

[Schneider]

noch mal ich!

Ich muss mich wohl entschuldigen. ich habe diesen "auftrag", den ich bekommen habe leider falsch verstanden.

Nochmal zu meiner, jetzigen Problematik:
Es sind mehrere inputs auf der Seite. Es gibt allerdings nur 1 Div (welches mit Werten gefüllt ist). Jetzt ist die Frage wie ich dieses eine Div direkt unter das angetippte Input bekomme. Soll heißen wenn ich ins 1. Input tippen soll es direkt unter dem input erscheinen, so wie es bei pit-r's script ist. Allerdings wird dann, wenn ich ein neues input erstelle auch ein neues div erstellt, da ich nicht weiß wie ich das div direkt unter dem Input platzieren kann.

Ich versuch es nochmal mit einem Bild zu erklären.


Vielen Dank für eure bissherigen Tips und Lösungen

edit: danke slayer2206 für den Vorschlag allerdings werden die Inputs nicht absolut positioniert. klappt dann diese Methode überhaupt noch?

 

[pit-r]

danke slayer2206 für den Vorschlag allerdings werden die Inputs nicht absolut positioniert. klappt dann diese Methode überhaupt noch?

Es geht um die Positionierung des divs und nicht die der inputs. Mit einer Kombination der Schnipsel von slayer2206 und shf10105 hast Du eigentlich alles, was Du brauchst...

 

[Schneider]

Irgendwie krieg ich das nicht hin

 

[Schneider]

Vielen Dank für eure Hife und vorralem die Geduld
Das hier ist wirklich ein Top Forum

jetzt hat es doch noch geklappt
hier wäre noch der fertige Code falls ihn jemand brauchen kann
JavaScript Teil

function getElementPos(element) {
	var left	= 0;
	var top		= 0;
	var height	= element.offsetHeight;
	var marginTop = 0;
	var marginLeft = 0;
	top	= top + element.offsetTop;
	left = left + element.offsetLeft;
	if (document.all) {
		marginTop = parseInt(document.body.style.marginTop);
		marginLeft = parseInt(document.body.style.marginLeft);
	}
	document.getElementById("div").style.top = (marginTop + top + height) + "px";
	document.getElementById("div").style.left = (marginLeft + left) + "px";
}

Mein Beispiel HTML Teil

<body style="margin: 400px; padding: 50px;">
<input onKeyUp="getElementPos(this);">
<br>
<input onKeyUp="getElementPos(this);">
<br>
<input onKeyUp="getElementPos(this);">
<div style="position: absolute; left:500px; top:300px;" id="div">
Wert 1<br>
Wert 2<br>
Wert 3<br>
Wert 4<br>
Wert 5<br>
</div>
</body>

Es funktioniert im IE sowie im FF

Nochmals tausend Dank!