Geek Answers Handbook

Copy selected text from one text field 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 the text in this text box, click the button, and the selected text will be copied to <textarea id="selection"> .

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

+4
source share
3 answers

This will do the following:

See 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">
+4
source

There is only one way I was able to do this. The problem you are facing is that when you click the button (while firing at an event to copy the selection), the text area loses focus and therefore the text is not selected.

So, as a workaround, I created a div to look (kind of like) like a text box. This seems to work:

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

Then the markup is as follows:

 <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 appeared, I got the getSelectedText () method from http://esbueno.noahstokes.com/post/92274686/highlight-selected-text-with-jquery

+6
source

with jquery you can do as below

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

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

0
source

More articles:


All Articles