Из одного textarea в другой
Здравствуйте, товарищи! :)
У меня такая задача: есть форма с двумя textarea, в одном из них текст, нужно вручную выделить часть текста, нажать на кнопку и тогда выделение скопируется в другой textarea. ... <textarea name="descr"></textarea> <textarea name="text"></textarea> <button>Вставить</button> ... Как это можно сделать? Я в js слабо соображаю, но очень нужно сделать такую штуку. Помогите пожалуйста. |
Вот такой код вставляет только теги, а содержимое нет :(
<p><textarea id="text" name="description" rows="3" cols="150"></textarea></p>
<p><textarea id='comment3' name="txt" rows="20" cols="150"></textarea></p>
<input href="#" type="button" onClick='comm(3)' value="Прокомментировать" />
<script type="text/javascript">
var textarea=document.getElementById('text');
function comm(id) {
textarea.value+="[\quote]"+document.getElementById('comment'+id).innerHTML+"[\/quote]\n";
}
</script>
А хотелось бы, чтобы вместо тегов вставлял просто текст выделенный. |
Chile,
<textarea></textarea>
<textarea id='target'></textarea>
<button id='pasteButton'>Paste</button>
<script>
function copySelected(target) {
if (target) {
const selectedText = document.getSelection().toString();
target.value = selectedText;
}
};
pasteButton.addEventListener('click', () => copySelected(target));
</script>
|
Попробовал пример — не работает. Может быть упустили что-то?
|
Вот нашёл пример, но он вставляет выделение только <div>, а не textarea в textarea:
<body>
<div class="post">Недавно в Chrome Web Store мне попалось приложение jsFiddle, проект британского программиста Piotr Zalewa
aka @zalun. По-сути, это очередная песочница для web-программистов, но говоря «очередная» я не подразумеваю
«никому не нужная». Я долго ждал момента, когда WYSIWYG заменят такие песочницы, и, похоже, дождался.</div>
<a
href="javascript: void(0);" onclick="quote_message();">цитировать выделенный текст</a>
<form action="actions.php?new_message" name="usermessageform" method="post">
<textarea cols="60" rows="20" wrap="VIRTUAL" id="message"></textarea>
</form>
<script>
var selecttext;
var message = document.getElementById("message");
(document.body || document.documentElement).onmouseup = function (e) {
var el = e ? e.target : window.event.srcElement;
if (el.tagName != 'DIV' || el.className != 'post') return;
selecttext = '';
if (window.getSelection) {
selecttext = window.getSelection();
} else if (document.getSelection) {
selecttext = document.getSelection();
} else if (document.selection) {
selecttext = document.selection.createRange().text;
}
};
function quote_message() {
message.value+= selecttext;
selecttext = '';
}
</script>
</body>
|
Chile,
Напечатайте текст в первом textarea, выделите его и нажмите кнопку paste/// разве не так? |
Ну да, именно так:) Но, в вашем примере, в сообщении не работает. Работаю в Firefox.
|
Цитата:
|
Цитата:
|
Цитата:
|
Вот так?
if (el.tagName != 'TEXTAREA') return; не работает :( |
копирование выделенного текста из textarea
Chile,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<body>
<textarea name="descr" cols="60" rows="10" >Недавно в Chrome Web Store мне попалось приложение jsFiddle, проект британского программиста Piotr Zalewa
aka @zalun. По-сути, это очередная песочница для web-программистов, но говоря «очередная» я не подразумеваю
«никому не нужная». Я долго ждал момента, когда WYSIWYG заменят такие песочницы, и, похоже, дождался</textarea>
<textarea name="text" cols="60" rows="10"></textarea>
<button type="button">цитировать выделенный текст</button>
<script>
var txt = '';
var message = document.querySelector('[name="text"]');
document.addEventListener('mouseup', function(event) {
var el = event.target;
if (el.tagName != 'TEXTAREA' && el.getAttribute('name') != 'descr') return;
if (txt = window.getSelection) {
txt = el.value.substring(el.selectionStart, el.selectionEnd);
} else {
txt = document.selection.createRange().text;
}
})
document.querySelector('button').addEventListener('click', function(event) {
message.value += txt;
txt = '';
})
</script>
</body>
</body>
</html>
|
рони, спасибо вам большое! А я уже начал было копать в гугле как заставить работать именно с textarea, так как решил, что не работает, поскольку она теряет фокус при нажатии на кнопку:)
|
У меня тут ещё вопросик. А как сделать, чтобы перед вставкой текста, вставлялся ещё одиночный тег <img src="" alt="" />?
Вот так попробовал, но вставляет только тег:
...
document.querySelector('button]').addEventListener('click', function(event) {
message.value += '<img src="" alt="" />' + txt;
txt = '';
})
...
|
Chile,
что не так??
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<body>
<textarea name="descr" cols="60" rows="10" >Недавно в Chrome Web Store мне попалось приложение jsFiddle, проект британского программиста Piotr Zalewa
aka @zalun. По-сути, это очередная песочница для web-программистов, но говоря «очередная» я не подразумеваю
«никому не нужная». Я долго ждал момента, когда WYSIWYG заменят такие песочницы, и, похоже, дождался</textarea>
<textarea name="text" cols="60" rows="10"></textarea>
<button type="button">цитировать выделенный текст</button>
<script>
var txt = '';
var message = document.querySelector('[name="text"]');
document.addEventListener('mouseup', function(event) {
var el = event.target;
if (el.tagName != 'TEXTAREA' && el.getAttribute('name') != 'descr') return;
if (txt = window.getSelection) {
txt = el.value.substring(el.selectionStart, el.selectionEnd);
} else {
txt = document.selection.createRange().text;
}
})
document.querySelector('button').addEventListener('click', function(event) {
message.value += '<img src="" alt="" />'+txt;
txt = '';
})
</script>
</body>
</body>
</html>
|
Работает теперь. Не пойму в чём была беда:) Ещё раз огромное спасибо!
|
беда была в селекторе кнопки видимо querySelector('button]')
|
Друзья, я вероятно уже достал всех своим поразительным нубством, но… Я тут подумал: а можно ли сделать кнопку неактивной, пока не выделен текст для отправки? Если это не сложно, помогите пожалуйста. Если требует много времени, не стоит, а то я и так уже злоупотребил гостеприимством:)
|
Chile,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<body>
<textarea name="descr" cols="60" rows="10" >Недавно в Chrome Web Store мне попалось приложение jsFiddle, проект британского программиста Piotr Zalewa
aka @zalun. По-сути, это очередная песочница для web-программистов, но говоря «очередная» я не подразумеваю
«никому не нужная». Я долго ждал момента, когда WYSIWYG заменят такие песочницы, и, похоже, дождался</textarea>
<textarea name="text" cols="60" rows="10"></textarea>
<button type="button" class="quote" >цитировать выделенный текст</button>
<script>
var txt = '';
var message = document.querySelector('[name="text"]');
var button = document.querySelector('.quote');
document.addEventListener('mouseup', function(event) {
var el = event.target;
if (el.tagName != 'TEXTAREA' && el.getAttribute('name') != 'descr') return;
if (txt = window.getSelection) {
txt = el.value.substring(el.selectionStart, el.selectionEnd);
} else {
txt = document.selection.createRange().text;
}
dis()
})
button.addEventListener('click', function(event) {
message.value += '<img src="" alt="" />'+txt;
txt = '';
dis()
})
function dis()
{
if(txt) button.removeAttribute('disabled');
else button.setAttribute('disabled', 'disabled')
}
dis()
</script>
</body>
</body>
</html>
|
рони, спасибо! Всё отлично работает.:)
|
| Часовой пояс GMT +3, время: 07:43. |