如何使用 JavaScript 或 jQuery 在文字方塊中的遊標位置插入文字？

使用JavaScript/jQuery 在遊標處插入文字

通常會遇到需要將文字動態插入文字方塊中的情況，其中遊標目前所在位置。無論您是開發 Web 表單還是建立互動式介面，此功能都被證明是非常寶貴的。

值得慶幸的是，利用 JavaScript 或 jQuery，您可以輕鬆地在遊標位置注入文本，即使在非文本框元素中也是如此。操作方法如下：

JavaScript 解決方案

以下 JavaScript函數改編自可靠來源，讓您在任何文字中的遊標處插入文字區域：

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;
}

用法

要使用此功能，請按照以下步驟操作：

1. HTML： 建立一個文字區域元素ID.

   <textarea>

2. JavaScript: 當所需的事件發生時，例如點擊連結。

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

限制

雖然此解決方案很強大，但需要注意的是，它可能無法在所有情況下完美運行，特別是在處理非文字方塊元素時。由您決定此方法是否符合您的特定要求。

以上是如何使用 JavaScript 或 jQuery 在文字方塊中的遊標位置插入文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！