javascript 将选定的文本从一个文本区域复制到另一个文本区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4342229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Copy selected text from one textarea to another
提问by joeljoeljoel
I have two <textarea>s. One with id="input"and the other with id="selection".
我有两个<textarea>。一个与id="input"另一个id="selection"。
<textarea id="input">will contain some HTML. The user will select some text in this textarea, click a button and the selected text will be copied to <textarea id="selection">.
<textarea id="input">将包含一些 HTML。用户将在此 textarea 中选择一些文本，单击一个按钮，所选文本将被复制到<textarea id="selection">.
I can use jQuery or just vanilla JavaScript and I'd like it to work in IE7+, Safari and Firefox.
我可以使用 jQuery 或只是 vanilla JavaScript，我希望它在 IE7+、Safari 和 Firefox 中工作。
回答by charliegriefer
There's only one way I've been able to do it. The problem you're running into, as you may be aware, is that when you click the button (thus firing the event to copy the selection), the textarea loses focus, and thereby there's no text selected.
我只有一种方法可以做到。您可能知道，您遇到的问题是，当您单击按钮（从而触发事件以复制选择）时，textarea 失去焦点，因此没有选择文本。
So as a workaround, I styled a div to look (kinda) like a textarea. That seems to work:
因此，作为一种解决方法，我将 div 的样式设置为看起来（有点）像 textarea。这似乎有效：
<style type="text/css">
.textarea {
border:1px solid black;
width:200px;
height:100px;
overflow-y: auto;
float:left;
}
</style>
The markup then looks like this:
然后标记如下所示：
<div id="input" class="textarea">This is a test</div>
<textarea id="selection"></textarea>
<button id="theButton">Copy</button>
And finally, the script:
最后，脚本：
var selText = "";
$( document ).ready( function() {
$( '#theButton' ).mousedown( function() {
$( '#selection' ).val( getSelectedText() );
});
});
function getSelectedText(){
if ( window.getSelection ) {
return window.getSelection().toString();
}
else if ( document.getSelection ) {
return document.getSelection();
} else if ( document.selection ) {
return document.selection.createRange().text;
}
}
To give full credit where it's due, I got the getSelectedText() method from http://esbueno.noahstokes.com/post/92274686/highlight-selected-text-with-jquery
为了给予应有的充分信任，我从http://esbueno.noahstokes.com/post/92274686/highlight-selected-text-with-jquery获得了 getSelectedText() 方法
回答by Tim Down
The following will do it:
以下将做到这一点：
See it in action: http://www.jsfiddle.net/QenBV/1/
看看它在行动：http: //www.jsfiddle.net/QenBV/1/
function getSelectedText(el) {
if (typeof el.selectionStart == "number") {
return el.value.slice(el.selectionStart, el.selectionEnd);
} else if (typeof document.selection != "undefined") {
var range = document.selection.createRange();
if (range.parentElement() == el) {
return range.text;
}
}
return "";
}
function copySelected() {
var srcTextarea = document.getElementById("input");
var destTextarea = document.getElementById("selection");
destTextarea.value = getSelectedText(srcTextarea);
}
<input type="button" onclick="copySelected()" value="copy selected">
回答by kobe
with jquery you can do as below
使用 jquery，您可以执行以下操作
$('#selection').val($('#input').val());
