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

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


javascript text-manipulation
person Itay Moav -Malimovka    schedule 25.10.2009    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Последняя версия всех браузеров поддерживает 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);
  }
}
person Juan Mendes    schedule 10.12.2009

arrow_upward
0
arrow_downward

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

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

person David    schedule 25.10.2009