Вставить текст в текущее место курсора в браузере

У меня есть модальное окно, которое помогает форматировать текст. У меня есть несколько текстовых полей в окне. Модальное не должно быть привязано к определенному текстовому пространству, поэтому, когда я нажимаю значок в модальном окне, мне нужно вставить строку/смайлик и т.д., Где бы ни был курсор в данный момент. Мой вопрос. Как узнать, в каком элементе (textarea/input/whatever) находится текущий курсор?

Ответ 1

Последняя версия всех браузеров поддерживает document.activeElement. Это скажет вам, какое поле в настоящее время имеет фокус в этом окне (где курсор). Затем вам нужно будет знать, как вставлять текст в текущую позицию курсора. Следующая функция делает именно это.

// Author: http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript
// Modified so it 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);
  }
}

Ответ 2

Кажется, что не существует такого свойства, как isfocused, которое вы можете просто проверить, чтобы определить, имеет ли конкретное текстовое поле фокус. Однако вы можете создать обработчик событий для события onFocus для каждого из текстовых полей и присвоить ему идентификатор записи вновь сфокусированного текстового поля в переменной, чтобы вы могли проверить его позже.

Кроме того, вас может заинтересовать этот учебник, в котором рассказывается, как вставлять текст в текущую позицию курсора в заданном поле ( как только вы определили, какое поле сфокусировано, например, используя вышеуказанный метод).