Rohde Geschrieben 27. Juni 2003 Teilen Geschrieben 27. Juni 2003 Hallo zusammen, ich versuche gerade mit Hilfe von JavaScript eine Combobox nachzubasteln, also ein Formularelement, daß es erlaubt, Texte einzugeben, aber gleichzeitig eine Auswahlliste ist (so wie etwa die Adreßleiste des Browsers). Dazu benutze ich ein Textfeld und eine zuerst versteckte mehrzeilige Auswahlliste. Alle Werte dieser Auswahlliste sind zusätzlich in einem Array untergebracht. Beide Formularelemente sind per CSS an der gleichen Stelle positioniert. Gibt man nun Text in das Textfeld ein, werden die einzelnen Elemente des Arrays nach diesem Textanfang durchsucht. Wird das erste Element gefunden, welches mit diesem Textteil anfängt, wird der Text im Textfeld entsprechend auf den Wert des gefunden Elementes gesetzt. In der immer noch versteckten Auswahlliste wird der entsprechende Wert selektiert. Neben dem Textfeld gibt es noch einen Link, der für diesen Pfeil nach unten steht, der neben den Comboboxen zu finden ist. Wird dort nun draufgeklickt, wird die Auswahlliste eingeblendet und man kann einen Wert über die Auswahlliste auswählen. Durch die Auswahl aus der Liste wird der Wert in das Textfeld geschrieben und das Auswahlfeld wieder ausgeblendet. Die Variable oldlength in dem Skript dient nur dazu, den Fall abzufangen, wenn das letzte Zeichen gelöscht wird. In diesem Fall soll der Text nicht erweitert werden. oldselecttext wird benötigt, um herauszufinden, ob mehr als ein Zeichen markiert wurde und gelöscht bzw. ersetzt wurde, um den Text im Textfeld bei Bedarf zu erweitern. Ich habe jetzt zwei Probleme bzw. Anliegen: 1. Wenn die Auswahlliste eingeblendet wird, soll der selektierte Wert auf den ersten Blick sichtbar sein. Wenn Ihr das Skript startet, in das Eingabefeld ein A eingebt und anschließend auf das Y klickt, werdet Ihr verstehen, was ich meine. Man muß in diesem Fall erst einmal in der Auswahlliste scrollen, um zu sehen, wo der selektierte Wert zu finden ist. document.forms[0].textfeld.selectedIndex.focus() funktioniert ja leider nicht. 2. Ich möchte gerne, daß nach dem automatischen Erweitern des Inhalts der Textbox der Text ab der alten Cursorposition markiert ist. Gebe ich beispielsweise ein A ein, wird der Text automatisch auf Apfel erweitert. pfel soll jetzt markiert sein. Irgendwo habe ich mal ein Skript gefunden, daß mir in einer Textarea Text an die Cursorposition einfügt. Ich weiß leider nicht mehr wo, denke aber, daß das ein Teil der Lösung sein könnte. Ich könnte mir vorstellen, daß das irgendwie über document.forms[0].textbox.select() läuft, bin mir dabei aber nicht sicher, weil dies laut SelfHTML den kompletten Text markieren würde. Die einzige Anforderung an das Skript ist, daß es mit dem Internet Explorer 6 läuft. Ich bin Euch echt für jede Hilfe dankbar. Auch Teillösungen und Denkansätze sind willkommen. <html> <head> <script> oldlength = 0; oldselecttext = ""; werte = new Array("","Apfel","Apfelbaum","Apfelkompott","Birne","Birnenbaum","Birnenkompott"); function check() { text = document.forms[0].textbox.value; if(oldlength < text.length || (oldlength > text.length && oldselecttext.length > 1)) { oldselecttext = document.selection.createRange().text; for(i=0;i<werte.length;i++) { if(werte.substr(0,text.length).toLowerCase() == text.toLowerCase()) { laenge=text.length; document.forms[0].selectbox.value = werte; document.forms[0].textbox.value = werte; oldlength = werte.length; break; } } } else { oldselecttext = document.selection.createRange().text; oldlength = text.length; if (text.length == 0) { document.forms[0].selectbox.value = ""; } } } function selectboxonoff() { switch(document.forms[0].selectbox.style.visibility) { case "hidden": document.forms[0].selectbox.style.visibility = "visible"; document.forms[0].selectbox.focus(); break; case "visible": document.forms[0].selectbox.style.visibility = "hidden"; document.forms[0].textbox.focus(); break; } } function changetext() { document.forms[0].textbox.value=document.forms[0].selectbox.value; oldlength = document.forms[0].textbox.value.length; document.forms[0].selectbox.style.visibility = "hidden"; document.forms[0].textbox.focus(); } </script> </head> <body onClick="document.forms[0].selectbox.visibility='hidden';" onLoad="document.forms[0].textbox.focus();"> <form> <input type=text name=textbox onKeyup="check()" style="position:absolute;left:50px;top:50px;width:250px;"> <a href="javascript:selectboxonoff();" style="position:absolute;left:305px;top:50px;text-decoration:none;">Y</a> <br><br> <select name=selectbox size=5 onClick="changetext()" style="position:absolute;left:50px;top:50px;visibility:hidden;width:270px;" onBlur="document.forms[0].selectbox.style.visibility='hidden';document.forms[0].textbox.focus();"> <script> for(i=0;i<werte.length;i++) { document.write("<option value='" + werte + "'>" + werte + "</option>"); } </script> </select> </form> </body> </html> Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
A.Z.R.A.E.L. Geschrieben 28. Juni 2003 Teilen Geschrieben 28. Juni 2003 Hi! Hab zwar nicht ganz verstanden was du willst aber du hast da einen kleinen fehler! und zwar bei dem Link mit dem "Y" schreibt man das "javascript" zusammen! Gruß Azrael Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Rohde Geschrieben 28. Juni 2003 Autor Teilen Geschrieben 28. Juni 2003 Stimmt, in meinem Quelltext ist das auch so. Vielleicht wurde es durch die Foren-Software so umgesetzt, um sich vor irgendwelchen Befehlen zu schützen, die man sonst unterschieben könnte. Ich habe aber noch einen anderen Fehler gefunden. Unter 1. muß der Satz "document.forms[0].textfeld.selectedIndex.focus() funktioniert ja leider nicht." natürlich "document.forms[0].selectbox.selectedIndex.focus() funktioniert ja leider nicht." heißen. Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.