Как я могу использовать JavaScript для вставки текста в текстовое поле?

Question

Мне нужно вставить текст в область текста в том месте, где находится курсор, как я могу это сделать без jquery?

Answer 1

Вы можете проверить небольшой пример кода по адресу:

• Вставка в курсор с помощью JavaScript

Код из вышеуказанной статьи:

function insertAtCursor(myField, myValue) {

  if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
  }
  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);
  } else {
    myField.value += myValue;
  }
}

// calling the function
insertAtCursor(document.getElementById('textarea_id'), 'sometext');

Answer 2

Пожалуйста, посмотрите код этого человека здесь . Этот код использует свойство selection объекта document для получения позиции курсора, а затем создает новую строку и вставляет ее в текстовую область. Он также имеет специальную подпрограмму для IE, которая имеет гораздо более громоздкую логику для нахождения позиции курсора.

Answer 3

Использовать атрибут HTML title? Это поместит текст всплывающей подсказки рядом с курсором, когда он находится над определенным элементом.

Или вы можете создать <div> с помощью position: fixed, а затем поместить его в event.screenX, event.screenY:

<div id="tip" style="position: fixed; visibility: hidden;"></div>
<textarea onmousemove="position();" onmouseout="hide();"></texarea>
<script type="text/javascript">
  function position() {
    var d = document.getElementById('tip');
    d.style.visibility = 'visible';
    d.style.left = event.screenX + 'px';
    d.style.top = event.screenX + 'py';
  }
  function hide() {
    document.getElementById('tip').style.visibility = 'hidden';
  }
</script>