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

Question

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

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 событие для каждого из текстовых полей, и имейте идентификатор записи вновь сфокусированного текстового поля в переменной, чтобы вы могли проверить это позже.

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