忍者ブログ

ひつ(じのひよこが)プログラミングします。
お仕事や趣味で困ったこととか、何度も「あれ?どうだったかしら」と調べたりしたこととか、作ったものとか、こどものこととかを書きます
★前は週末定期更新でしたが今は不定期更新です

2024/11    10« 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  »12

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

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

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

<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 に解説が載ってたりする。背景色を変えたり、文字のそろえ方を変えたりできる。簡単なエディタを実装・提供したい場合には便利そう。

PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R