CODEWITHSUNDEEP
javascriptjquerytextarea
joeljoeljoel
joeljoeljoel

Reputation: 633

Copy selected text from one textarea to another

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.

Upvotes: 4

Views: 12147

Answers (3)

Tim Down
Tim Down

Reputation: 324567

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">

Upvotes: 6

charliegriefer
charliegriefer

Reputation: 3382

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

Upvotes: 7

kobe
kobe

Reputation: 15835

with jquery you can do as below 

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

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

Upvotes: 0

Related Questions