Как скопировать выделенный текст в javascript

214

13 марта 2018, 00:47

Всем привет! Занимаюсь созданием курса, в котором пользователь может выделить кусок текста и сделать заметку. В общем суть такая:

Пользователь выделил кусок текста.
Нажимает на кнопку напр. "Сохранить".
Текст сохраняется в новом div и отправляется в другую HTML страницу.

Вопрос, как при помощи javascript можно реализовать данную идею?

Answer 1

Привел пример того, как можно выделить текст и сохранить его в div по нажатию на кнопку "сохранить", отправка идет на сервер через POST запрос.

function getSelectionText() { 
  var text = ""; 
  var activeEl = document.activeElement; 
  var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null; 
  if ( 
    (activeElTagName == "textarea") || (activeElTagName == "input" && 
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) && 
    (typeof activeEl.selectionStart == "number") 
  ) { 
    text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd); 
  } else if (window.getSelection) { 
    text = window.getSelection().toString(); 
  } 
  return text; 
} 
 
var saveText = function() { 
  var selectionText = getSelectionText(); 
  document.getElementById("sel").innerHTML = selectionText; 
  //пост отправка 
  var xhr = new XMLHttpRequest(); 
  xhr.open("POST", url, true); //url - адрес, на который надо отправить записку. 
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
  xhr.send(JSON.stringify({ 
    note: selectionText 
  })); 
}

div, 
button { 
  float: left; 
  clear: both; 
} 
 
div { 
  width: 100%; 
} 
 
#sel { 
  height: 100px; 
  background-color: #fafafa 
}

<div> 
  <p>Текст предназначенный для выделения</p> 
  <p>Текст предназначенный для выделения2</p> 
  <p>Текст предназначенный для выделения3</p> 
</div> 
<div id="sel">Здесь будет текст, который будет выделяться</div> 
<button onclick="saveText();">Сохранить</button>

А для получения кода используем xhr-request на другой странице

var xhr = new XMLHttpRequest();
xhr.open('GET', url, false); //здесь url по которому получаем данные
xhr.send();
if (xhr.status != 200) {
    alert( xhr.status + ': ' + xhr.statusText );
} else {
    alert( xhr.responseText ); // responseText -- текст ответа.
    //здесь какая-то вставка текста в div, textarea и т.д.
}