Mit Javascript Textfeld an Mausposition einfügen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufruf
code
dank
demo
eigenschaft
erzeugen
http
inhalt
input
koordinate
normalen dom
notiz
objekt
output
position
speichern
string
textfeld
umsetzen
url
-
Hallo,
ich habe vor, ein "Notiz-Feld" zu erstellen. Es gibt also ein Div und wenn man in das Div klickt soll an der Stelle, wo man geklickt hat, ein Textfeld auftauchen, damit man dort etwas reinschreiben kann. Ich habe bereits folgenden Code gefunden, um ein Textfeld zu erzeugen:
Javascript:
function menu(){ var string="<input type='text' name='neuer_text'>"; document.getElementById("neu").innerHTML=string; } </script>
HTML:
<div id="notizen" onclick="menu()"> <ol id="neu"> </ol> </div>
Es wird ein Textfeld erstellt, aber ganz oben im Div. Wie bekomme ich das jetzt hin, dass das Textfeld genau da eingefügt wird, wo man hin geklickt hat? Ich habe schon viel gesucht aber nichts passendes gefunden. Ich würde mich über Hilfe freuen.
Viele Grüße -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
1) Warum nutzt du
und nicht die normalen DOM-Funktionen wie z.B.innerHTML
usw?createElement()
2) Damit dein Textfeld an der richtigen Stelle auftaucht musst du nur vom Maus-Event die Koordinaten als Position an das Textfeld »übergeben«. Das erreichst du per CSS-Eigenschaft (
,top
) und als Positionierung nimmst duleft
.position:absolute -
1) Warum nutzt du innerHTML und nicht die normalen DOM-Funktionen wie z.B. createElement() usw?
Weil ich mich leider noch nicht genug mit Javascript auskenne und weil dass das einzige war, womit ich es hinbekommen habe, wenigstens ein Textfeld zu erstellen. Und deinen zweiten Tipp kann ich leider auch nicht umsetzen, wäre cool wenn du mir noch ein bisschen hilfst ;) -
Ok danke.
Also das habe ich jetzt, um ein Textfeld zu erzeugen:
<script type="text/javascript"> function textfeld(){ var myH1 = document.createElement("input"); var Ausgabebereich = document.getElementById("Bereich"); Ausgabebereich.appendChild(myH1); } </script>
Und das für die Mausposition hbe ich von der Seite, die du mir geschickt hast. Aber wie kombiniere ich das jetzt? Hab da grad keine Idee. -
ultimate-bravery schrieb:
Zum Beispiel so:
Aber wie kombiniere ich das jetzt?function notiz(e) { var input = document.createElement("input"); input.type = "text"; input.style.position = "absolute"; input.style.left = e.clientX + "px"; input.style.top = e.clientY + "px"; var output = document.getElementById("notizen"); output.appendChild(input); input.focus(); }Der HTML-Code dazu sieht dann so aus:<div id="notizen" onclick="notiz(event)"></div>
Demo -
Super danke, klappt soweit. Kann man es verhindern, dass ein neues Textfeld erstellt wird, wenn man in ein anderes Textfeld klickt?
-
ultimate-bravery schrieb:
Falls du dir meine Demo angesehen hättest wäre dir die Lösung aufgefallen
Kann man es verhindern, dass ein neues Textfeld erstellt wird, wenn man in ein anderes Textfeld klickt?
Aber damit das für alle Ewigkeit dokumentiert bleibt hier noch einmal der komplette Quellcode:<!DOCTYPE html> <html> <head> <style type="text/css"> #notes { width: 300px; height: 300px; } #field { position: relative; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc; } </style> <script type="text/javascript"> function note(e) { var input = document.createElement("input"); input.type = "text"; input.style.position = "absolute"; input.style.left = e.clientX + "px"; input.style.top = e.clientY + "px"; var output = document.getElementById("notes"); output.appendChild(input); input.focus(); } </script> </head> <body> <div id="notes"> <div id="field" onclick="note(event)"></div> </div> </body> </html> -
ultimate-bravery schrieb:
Ja, diese Möglichkeit gibt es auch. Dazu musst du nur alle Textfelder in einer Schleife durchlaufen und die entsprechenden
Gibt es eine Möglichkeit, die Textfelder mit ihren Koordinaten und Inhalt in eine Datenbank zu speichern, sodass man sie beim nächsten Aufruf wieder sehen kann?
undleft
-Eigenschaften auslesen sowie den Inhalt des Textfeldes dazu speichern. An den Server kannst du die Daten anschließend per AJAX schicken.top -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
