kostenloser Webspace werbefrei: lima-city


Mit Javascript Textfeld an Mausposition einfügen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    1) Warum nutzt du
    innerHTML
    und nicht die normalen DOM-Funktionen wie z.B.
    createElement()
    usw?

    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
    ,
    left
    ) und als Positionierung nimmst du
    position:absolute
    .
  4. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    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 ;)
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    ultimate-bravery schrieb:
    Und deinen zweiten Tipp kann ich leider auch nicht umsetzen, wäre cool wenn du mir noch ein bisschen hilfst ;)
    Lies dir das durch, dort sollten alle Informationen die du benötigst enthalten sein. Schau dir auch die Demo an.
  6. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    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.
  7. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    ultimate-bravery schrieb:
    Aber wie kombiniere ich das jetzt?
    Zum Beispiel so:
    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
  8. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    Super danke, klappt soweit. Kann man es verhindern, dass ein neues Textfeld erstellt wird, wenn man in ein anderes Textfeld klickt?
  9. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    ultimate-bravery schrieb:
    Kann man es verhindern, dass ein neues Textfeld erstellt wird, wenn man in ein anderes Textfeld klickt?
    Falls du dir meine Demo angesehen hättest wäre dir die Lösung aufgefallen ;-)

    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>
  10. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    Hatte mir es angeguckt, aber nicht den Quellcode. Danke dir!

    EDIT: 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?

    Beitrag zuletzt geändert: 5.7.2013 23:17:22 von ultimate-bravery
  11. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    ultimate-bravery schrieb:
    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?
    Ja, diese Möglichkeit gibt es auch. Dazu musst du nur alle Textfelder in einer Schleife durchlaufen und die entsprechenden
    left
    und
    top
    -Eigenschaften auslesen sowie den Inhalt des Textfeldes dazu speichern. An den Server kannst du die Daten anschließend per AJAX schicken.
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!