如何使用 JavaScript 在文字區域的遊標位置插入文字？

使用 Javascript/jQuery 在遊標位置插入文字

在 Web 開發中，在遊標所在位置添加文字可以增強使用者體驗。一種場景包括允許用戶在單擊連結時無縫地將預定義文字插入文字方塊中。

在遊標位置插入文本

要在遊標位置插入文本，我們可以利用以下JavaScript 函數：

function insertAtCaret(areaId, text) {
  // Get the textarea element
  var txtarea = document.getElementById(areaId);

  // Check if the element exists
  if (!txtarea) {
    return;
  }

  // Determine the browser type (Internet Explorer or others)
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));

  // Calculate the cursor position
  var strPos = 0;
  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;
  }

  // Create a string that consists of the text before, after, and the inserted text
  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back;

  // Reset the cursor position after inserting the text
  strPos = strPos + text.length;
  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();
  }
}

用法範例

以下HTML 和JavaScript 程式碼示範如何使用insertAtCaret() 函數：

<textarea>

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