在浏览器中光标当前位置插入文本

Question

我有一个模式窗口，可以帮助格式化文本。 我的窗口上有多个文本区域。 模式不应附加到特定的文本区域，因此当我在模式窗口中按下图标时，我需要在光标当前所在的位置插入字符串/表情符号等。 我的问题是，我如何知道光标当前位于哪个元素（文本区域/输入/其他）？

Answer 1

所有浏览器的最新版本都支持 document.activeElement。这将告诉您当前在该窗口中哪个字段具有焦点（即光标所在的位置）。然后，您需要知道如何在当前光标位置插入文本。下面的函数就是这样做的。

// Author: http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript
// Modified so it's safe across browser windows
function insertAtCursor(myField, myValue) {
  var doc = myField.ownerDocument;
  //IE support
  if (doc.selection) {
    myField.focus();
    sel = doc.selection.createRange();
    sel.text = myValue;
  }
  //FF, hopefully others
  else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos) + 
                    myValue + myField.value.substring(endPos, myField.value.length);
  } 
  // fallback to appending it to the field
  else {
    myField.value += myValue;
  }
}

因此，从弹出窗口中，按钮处理程序应调用以下方法

// Pardon my contrived function name
function insertTextIntoFocusedTextFieldInOpener(text) {
  var field = window.opener.document.activeElement;
  if (field.tagName == "TEXTAREA" || (field.tagName == "INPUT" && field.type == "text" ) {
    insertAtCursor(field, text);
  }
}

Answer 2

似乎没有像 isfocused 这样的属性，您可以通过检查来确定特定文本字段是否具有焦点。不过，您可以为每个文本框的 onFocus 事件创建一个事件处理程序，并让它在变量中记录新聚焦的文本框的 ID，以便您稍后检查。

另外，您可能对本教程感兴趣，它告诉您如何在给定字段中的当前光标位置插入文本（一旦确定了焦点字段，例如使用上述方法）。