Question

我有两个<textarea>个。一个使用id="input"，另一个使用id="selection"。

<textarea id="input">将包含一些HTML。用户将在此文本区域中选择一些文本，单击按钮，所选文本将复制到<textarea id="selection">。

我可以使用jQuery或只是vanilla JavaScript，我希望它可以在IE7 +，Safari和Firefox中使用。

Answer 1

我只有一种方法可以做到这一点。正如您可能知道的那样，您遇到的问题是，当您单击按钮（从而触发事件以复制选择）时，textarea会失去焦点，从而没有选择文本。

因此，作为一种解决方法，我设计了一个div，看起来像有点像textarea。这似乎有效：

<style type="text/css">
    .textarea { 
        border:1px solid black; 
        width:200px; 
        height:100px; 
        overflow-y: auto; 
        float:left; 
    }
</style>

标记看起来像这样：

<div id="input" class="textarea">This is a test</div>
<textarea id="selection"></textarea>

<button id="theButton">Copy</button>

最后，脚本：

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（）方法

Answer 2

以下将会这样做：

查看实际操作：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">

Answer 3

使用jquery，您可以按照以下方式执行

 $('#selection').val($('#input').val());

http://api.jquery.com/val/

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

3 个答案: