テキスト入力エリアの内容をクリップボードにコピーさせる

<input type="text" id="copyExec" />

// input の中身を全選択する
// jQuery が使えるなら $('#copyFrom').select(); でも OK
var input = document.getElementById('copyFrom');
input.focus();
input.setSelectionRange(0, input.value.length);

// 選択した範囲をクリップボードにコピー
document.execCommand('copy');

なお、input の中身を選択しないといけないので input の css に display:none; 等と設定していると上手く動かないので注意。ユーザに表示させたくない事情がある場合は position:absokute; top:-5000px; 等としてはるか彼方に飛ばしてしまうが吉。

execCommand

execCommand は割と色々やれるようで、選択した範囲の文字を装飾したりできるようだ (MDN の解説)。ただし、上述の input が対象だとやれることは限られる。しかし contenteditable な HTML だとちょっと変わってくる。

<div contenteditable>
ひよこ<br />
ひつじ<br />
こねこ
</div>
<hr/>
<div>
編集対象外の HTML
</div>

上述のような HTML を書いたうえで上の contenteditable な HTML の一部分を選択し document.execCommand('foreColor', null, 'red'); 等としてやるとその範囲のフォントを赤にできる。しかし、下部の contenteditable ではない HTML については不可能となっている。どんなことができるのかは MDN に解説が載ってたりする。背景色を変えたり、文字のそろえ方を変えたりできる。簡単なエディタを実装・提供したい場合には便利そう。