Copier le texte sélectionné d'une zone de texte à une autre

Question

J'ai deux <textarea> s. Un avec id="input" et l'autre avec id="selection".

<textarea id="input"> contient du code HTML. L'utilisateur sélectionnera du texte dans cette zone de texte, cliquera sur un bouton et le texte sélectionné sera copié à <textarea id="selection">.

Je peux utiliser jQuery ou simplement vanilla JavaScript et je voudrais qu'il fonctionne dans IE7 +, Safari et Firefox.

Answer 1

Ce qui suit va le faire:

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

Answer 2

avec jquery vous pouvez le faire comme ci-dessous

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

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

Answer 3

Il n'y a qu'une seule façon que je suis capable de le faire. Le problème que vous rencontrez, comme vous le savez peut-être, est que lorsque vous cliquez sur le bouton (ce qui déclenche l'événement pour copier la sélection), la zone de texte perd le focus et, par conséquent, aucun texte n'est sélectionné. Pour contourner le problème, j'ai créé un div pour ressembler (un peu) à une zone de texte. Cela semble fonctionner:

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

Le balisage ressemble alors à ceci:

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

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

Et enfin, le 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; 
    } 
} 

Pour donner plein crédit où il est dû, je suis la Méthode getSelectedText() de http://esbueno.noahstokes.com/post/92274686/highlight-selected-text-with-jquery