対象の子要素を選択状態にしてクリップボードへコピー
対象の子要素を選択状態にしてクリップボードへコピーするには、次の方法で可能です。
JavaScript
/**
* 子要素を選択してクリップボードへコピー
* @param {Element} parentElem コピーする要素の親要素
* @return {boolean} コピーに成功した場合はtrue、失敗した場合はfalseを返す
*/
var copyChildrenElementToClipboard = function(parentElem) {
// ユーザーの選択状態を得る
var selection = document.getSelection();
// 対象子要素を選択状態にする
selection.selectAllChildren(parentElem);
// クリップボードへコピー
var result = document.execCommand('copy');
// 選択を解除
selection.removeAllRanges();
return result;
};JavaScript
var sampleElem = document.getElementById('sample'),
copyBtnElem = document.getElementById('copy');
copyBtnElem.addEventListener('click', function() {
var result = copyElementToClipboard(sampleElem);
if (result) {
alert('コピーに成功');
} else {
alert('コピーに失敗');
}
});簡単な解説
document.getSelectionメソッドで選択状態を得ます。
選択状態は関係なく、Selectionオブジェクトを使いたいために実行しています。
Selection.selectAllChildrenメソッドで引数で指定した親要素から、子要素全てを選択状態にします。
document.execCommandメソッドで選択状態の内容をクリップボードへコピーします。
最後にSelection.removeAllRangesで選択状態を解除します。