Text einfügen an bestimmter Stelle auf einer Webseite

Question

Ich möchte ein Programm schreiben, das an einer bestimmten Stelle auf einer Webseite Text einfügt.

Wie macht man so etwas?

Answer 1

Zunächst benötigst Du eine Textarea:

<textarea id="content"></textarea>

Daran schließt Du folgendne JavaScript Code an:

function insert_at(text){
   var content = document.getElementById("content");
   if(document.selection){
      content.focus();
      sel = document.selection.createRange();
      sel.text = text;
   } else if(content.selectionStart || content.selectionStart == '0'){
      var start = content.selectionStart;
      var end = content.selectionEnd;
      content.value = content.value.substring(0, start) + text + content.value.substring(end, content.value.length);
   } else {
      content.value += text;
   }
}

Diese Funktion rufst Du dann z. B. beim Onklick-Event eines Buttons auf.

Answer 2

1. Editieren von Text auf Webseiten mit Javascript

Wenn man einem HTML-Element den Parameter contenteditable="true" hinzufügt, wird es editierbar. Und genau das kannst du mit Javascript machen. Im Folgenden mit Jquery gezeigt:

HTML:

<p>Das ist mein Originaltext.</p>

JQuery:

$('p').on("click", function(){
 $(this).attr("contenteditable", true);
})

JSFiddle:

http://jsfiddle.net/kai_noack/xpvt214o/903518/

2. Editieren von Text auf Webseiten mit Chrome Browser

Zum Editieren und Eingeben von Text auf Webseiten kannst du für den Chrome-Broswer das Plugin Page Editor verwenden: https://chrome.google.com/webstore/detail/page-editor/gjhhlkjfglilanfckcmnjdhpapdmiijk

Damit kannst du alle Texte auf einer Webseite editieren.

Wichtig: Lädst du die Seite neu, sind die Änderungen verloren und das Original wird wieder angezeigt.

Screencast:

Alternative Developer Tools:

Alternativ kannst du auch die Developer Tools von Chrome öffnen und dann das Element auf der Webseite auswählen, das du verändern möchtest. Shortcut: CTRL+SHIFT+C.

Dann doppelklickst du in den HTML-Sourcecode und schreibst deinen Text hinein.

Screencast:

Comments

Vielen Dank für die Antwort. Ich wollte das aber gerne für Java-Skript machen. Also z.B. einen Cursor an Position X und dann einfügen von Text.

---

Ich habe meine Antwort ergänzt. Bitte gib stets alle notwendigen Details bei der Frage an. Insbesondere die geforderte Programmiersprache!