Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вывод информации без удаления предыдущей (https://javascript.ru/forum/dom-window/78920-vyvod-informacii-bez-udaleniya-predydushhejj.html)

Keberson 22.11.2019 14:52

Вывод информации без удаления предыдущей
 
Приветствую! Предо мной стоит задача: выводить выделенный мышкой текст, причем, чтобы предыдущий выделенный текст не удалялся

Решил попробовать забивать в массив, но не получается...

html:
<script>
    let arr = [];
    var text = "";
    function getSelectedText() {
      var text = "";
      if (window.getSelection) {
        text = window.getSelection();
      } else if (document.getSelection) {
        text = document.getSelection();
      } else if (document.selection) {
        text = document.selection.createRange().text;
      }
      arr.push(text);
      document.getElementById("id1").textContent = arr;
      return text;
    }
  </script>

<body>
  <header>
    Набор предложений: оаоаоаоааоаоаоа
    <input id="input" style="width:200px" value="Как тут писать?">
    <button id="button" onclick="getSelectedText()">Запуск JS скрипта</button>
    <div id="id1"></div>
  </header>
</body>

Буду рад любой помощи) Заранее спасибо:write:

рони 22.11.2019 15:03

Keberson,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 22.11.2019 15:10

Keberson,
onclick="input.value += getSelectedText()"

Keberson 22.11.2019 15:18

Хах, все оказалось слишком легко:)
Спасибо)

А можете еще с другим вопросом помочь:
Возможно ли выделенному тексту, после вставки в поле input изменить цвет? Но не всему, а только тому, который только-только вставил??

рони 22.11.2019 15:32

Keberson,
можно если вставлять не в инпут

Keberson 22.11.2019 15:39

А не могли бы вы, пожалуйста, привести пример?
Любой, мне input в принципе вообще не важен

рони 22.11.2019 15:40

Keberson,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #id1 span{
     color: red;
  }

  </style>
  <script>
var str = "";
function getSelectedText() {
    var text = window.getSelection().toString();
    if(text && text.trim()){
    id1.innerHTML =`${str}<span>${text}</span>`
    str += text;
    }
}

  </script>
</head>

<body>
  <header>
    Набор предложений: оаоаоаоааоаоаоа
    <button id="button" onclick="getSelectedText()">Запуск JS скрипта</button>
    <div id="id1"></div>
  </header>
</body>

</html>

Keberson 22.11.2019 15:41

Чтобы цвет при этом сохранился?
Я это имел ввиду)))

рони 22.11.2019 15:43

Цитата:

Сообщение от Keberson
Чтобы цвет при этом сохранился?

не понимаю.

Keberson 22.11.2019 15:44

После нажатия второй раз на кнопку цвет у span пропадает, так как и сам класс (как я понимаю) пропадает
Но хотелось бы, чтобы класс span не исчезал


Часовой пояс GMT +3, время: 07:42.