Copy selected text from one textarea to another

Question

I have two <textarea>s. One with id="input" and the other with 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">.

I can use jQuery or just vanilla JavaScript and I'd like it to work in IE7+, Safari and Firefox.

Answer 1

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.

So as a workaround, I styled a div to look (kinda) like a textarea. That seems to work:

<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

Answer 2

The following will do it:

See it in action: 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">