Форум

Keberson · #1 (**permalink**) 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>

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

рони · #2 (**permalink**) 22.11.2019, 15:03

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

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

[html run]
... минимальный код страницы с вашей проблемой
[/html]

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

рони · #3 (**permalink**) 22.11.2019, 15:10

Keberson,

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

Keberson · #4 (**permalink**) 22.11.2019, 15:18

Хах, все оказалось слишком легко

Спасибо)

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

рони · #5 (**permalink**) 22.11.2019, 15:32

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

Keberson · #6 (**permalink**) 22.11.2019, 15:39

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

рони · #7 (**permalink**) 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 · #8 (**permalink**) 22.11.2019, 15:41

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

рони · #9 (**permalink**) 22.11.2019, 15:43

Сообщение от Keberson

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

не понимаю.

Keberson · #10 (**permalink**) 22.11.2019, 15:44

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

Форум

Справочник

Discord чат

Курсы javascript