Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.11.2019, 14:52
Новичок на форуме
Отправить личное сообщение для Keberson Посмотреть профиль Найти все сообщения от Keberson
 
Регистрация: 22.11.2019
Сообщений: 7

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

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

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>

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

Последний раз редактировалось Keberson, 22.11.2019 в 15:08.
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2019, 15:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 22.11.2019, 15:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Keberson,
onclick="input.value += getSelectedText()"
Ответить с цитированием
  #4 (permalink)  
Старый 22.11.2019, 15:18
Новичок на форуме
Отправить личное сообщение для Keberson Посмотреть профиль Найти все сообщения от Keberson
 
Регистрация: 22.11.2019
Сообщений: 7

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

А можете еще с другим вопросом помочь:
Возможно ли выделенному тексту, после вставки в поле input изменить цвет? Но не всему, а только тому, который только-только вставил??
Ответить с цитированием
  #5 (permalink)  
Старый 22.11.2019, 15:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Keberson,
можно если вставлять не в инпут
Ответить с цитированием
  #6 (permalink)  
Старый 22.11.2019, 15:39
Новичок на форуме
Отправить личное сообщение для Keberson Посмотреть профиль Найти все сообщения от Keberson
 
Регистрация: 22.11.2019
Сообщений: 7

А не могли бы вы, пожалуйста, привести пример?
Любой, мне input в принципе вообще не важен
Ответить с цитированием
  #7 (permalink)  
Старый 22.11.2019, 15:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 22.11.2019 в 15:54.
Ответить с цитированием
  #8 (permalink)  
Старый 22.11.2019, 15:41
Новичок на форуме
Отправить личное сообщение для Keberson Посмотреть профиль Найти все сообщения от Keberson
 
Регистрация: 22.11.2019
Сообщений: 7

Чтобы цвет при этом сохранился?
Я это имел ввиду)))
Ответить с цитированием
  #9 (permalink)  
Старый 22.11.2019, 15:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Keberson
Чтобы цвет при этом сохранился?
не понимаю.
Ответить с цитированием
  #10 (permalink)  
Старый 22.11.2019, 15:44
Новичок на форуме
Отправить личное сообщение для Keberson Посмотреть профиль Найти все сообщения от Keberson
 
Регистрация: 22.11.2019
Сообщений: 7

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод последовательно итераций массива без перезагрузки lexus777 AJAX и COMET 1 28.03.2016 14:31
Поиск по БД и вывод без обновления страницы BashOrgRu Общие вопросы Javascript 2 20.08.2013 11:33
сохранение информации в инпут без сабмит najrobi Javascript под браузер 43 15.06.2013 02:37
Вывод определенных записей в таблицу без фильтрации Eugent ExtJS 0 27.08.2012 11:23
Удалить тег без удаления содержимого DZHETIGAPA Элементы интерфейса 3 20.05.2011 09:18