clipboard.jsのdata-clipboard-textでsuccessの時にコピーされない解決策

2025.08.12 - Note

clipboard.jsのdata-clipboard-textでsuccessの時にコピーされない解決策

※この記事はAIを利用して整形しています。
clipboard.js は非常に便利ですが、tabindex や position: fixed が設定された要素内で使うと、うまく動作しないことがあります。これは、clipboard.js が内部でテキストを選択する仕組みに原因があります。

問題の解決策

この問題を解決するには、data-clipboard-target を使って、コピー対象となる textarea を明示的に指定するのが最も確実です。

以下のように、コピーしたい内容を textarea 要素に入れておき、その textarea に id を振ります。そして、clipboard.js を使うボタンに data-clipboard-target 属性を設定し、textarea の id を指定します。

<textarea id="my-text">ここにコピーしたいテキストを入れます。</textarea>
<button class="btn" data-clipboard-target="#my-text"> テキストをコピー </button>

1 2	<textarea id="my-text">ここにコピーしたいテキストを入れます。</textarea> <button class="btn" data-clipboard-target="#my-text"> テキストをコピー </button>

この方法なら、clipboard.js は textarea の内容を直接コピーするため、要素のフォーカス状態や配置に影響されることなく、確実に動作します。

注意点：`display: none;` は使わない

textarea をUIから隠したい場合、安易に display: none; を使うと、clipboard.js がテキストを選択できず、コピーが失敗する場合があります。

代わりに、以下のようなCSSで要素を画面外に配置してください。

CSS
/* textareaを画面外に配置するCSS */
#my-text {
  position: absolute;
  left: -9999px;
}

				
					
				1
2
3
4
5

						/* textareaを画面外に配置するCSS */
#my-text {
  position: absolute;
  left: -9999px;
}

					

			

まとめ

clipboard.js が期待通りに動かない場合は、data-clipboard-target でコピー対象の textarea を指定する方法を試してみてください。そして、その textarea を隠す際は、display: none; ではなく position: absolute; などで画面外に配置することを忘れないでください。

BLOG