Вывод информации без удаления предыдущей
Приветствую! Предо мной стоит задача: выводить выделенный мышкой текст, причем, чтобы предыдущий выделенный текст не удалялся
Решил попробовать забивать в массив, но не получается... 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: |
Keberson,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Keberson,
onclick="input.value += getSelectedText()" |
Хах, все оказалось слишком легко:)
Спасибо) А можете еще с другим вопросом помочь: Возможно ли выделенному тексту, после вставки в поле input изменить цвет? Но не всему, а только тому, который только-только вставил?? |
Keberson,
можно если вставлять не в инпут |
А не могли бы вы, пожалуйста, привести пример?
Любой, мне input в принципе вообще не важен |
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>
|
Чтобы цвет при этом сохранился?
Я это имел ввиду))) |
Цитата:
|
После нажатия второй раз на кнопку цвет у span пропадает, так как и сам класс (как я понимаю) пропадает
Но хотелось бы, чтобы класс span не исчезал |
Цитата:
Цитата:
|
Все решил этот вопрос)) Спасибо большое за информацию!
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
var str = "";
function getSelectedText() {
var text = window.getSelection();
id1.innerHTML =`${id1.innerHTML}<span style = "color: red;">${text}</span>`
str += text;
}
</script>
</head>
<body>
<header>
Набор предложений: оаоаоаоааоаоаоа
<button id="button" onclick="getSelectedText()">Запуск JS скрипта</button>
<div id="id1"></div>
</header>
</body>
</html>
вот так получилось |
Keberson,
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#id1{
color: red;
}
</style>
<script>
var str = "";
function getSelectedText() {
var text = window.getSelection().toString();
if(text && text.trim()){
str += text;
id1.innerHTML =`${str}`
}
}
</script>
</head>
<body>
<header>
Набор предложений: оаоаоаоааоаоаоа
<button id="button" onclick="getSelectedText()">Запуск JS скрипта</button>
<div id="id1"></div>
</header>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:16. |