Wie kann ich mit JavaScript oder jQuery Text an der Cursorposition in ein Textfeld einfügen?

Text am Cursor mit JavaScript/jQuery einfügen

Es kommt häufig vor, dass Sie auf Szenarien stoßen, in denen Sie Text dynamisch in ein Textfeld einfügen müssen, in dem sich der befindet Der Cursor befindet sich gerade. Unabhängig davon, ob Sie Webformulare entwickeln oder interaktive Schnittstellen erstellen, ist diese Funktionalität von unschätzbarem Wert.

Glücklicherweise können Sie mithilfe von JavaScript oder jQuery mühelos Text an der Cursorposition einfügen, sogar in Nicht-Textfeld-Elementen. So geht's:

JavaScript-Lösung

Die folgende JavaScript-Funktion, adaptiert aus einer seriösen Quelle, ermöglicht es Ihnen, Text am Cursor in einen beliebigen Textbereich einzufügen:

function insertAtCaret(areaId, text) {
  // Retrieve the text area element
  var txtarea = document.getElementById(areaId);
  if (!txtarea) {
    return;
  }

  // Save the current scroll position
  var scrollPos = txtarea.scrollTop;

  // Determine the cursor position based on browser support
  var strPos = 0;
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));
  if (br == "ie") {
    txtarea.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    strPos = range.text.length;
  } else if (br == "ff") {
    strPos = txtarea.selectionStart;
  }

  // Split the text area value into front and back parts
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);

  // Insert the text into the cursor position
  txtarea.value = front + text + back;
  strPos = strPos + text.length;

  // Update the cursor position based on browser support
  if (br == "ie") {
    txtarea.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart('character', -txtarea.value.length);
    ieRange.moveStart('character', strPos);
    ieRange.moveEnd('character', 0);
    ieRange.select();
  } else if (br == "ff") {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  }

  // Restore the scroll position
  txtarea.scrollTop = scrollPos;
}

Verwendung

Um diese Funktion zu verwenden, folgen Sie den Anweisungen diese Schritte:

1. HTML: Erstellen Sie ein Textbereichselement mit einer ID.

   <textarea>

2. JavaScript: Rufen Sie die Funktion insertAtCaret auf, wenn ein gewünschtes Ereignis eintritt, beispielsweise das Klicken auf a Link.

   document.getElementById("myLink").addEventListener("click", function() {
     insertAtCaret("textareaid", "text to insert");
   });

Einschränkungen

Obwohl diese Lösung robust ist, ist es wichtig zu beachten, dass sie möglicherweise nicht in allen Situationen einwandfrei funktioniert. insbesondere beim Umgang mit Nicht-Textfeld-Elementen. Es liegt an Ihnen, zu bestimmen, ob dieser Ansatz Ihren spezifischen Anforderungen entspricht.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript oder jQuery Text an der Cursorposition in ein Textfeld einfügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!