CopyField

コピーして使う値を表示する欄と、コピーボタンです。

作り直す操作を添える(招待リンク)

狭い場所:長い値は欄の中で省略する

右から左に読む場合

使いどころ

  • 公開リンクや招待リンク、APIキーのように、ほかの場所へコピーして使う値を見せる時に使います。
  • 書き換える値は Field と Input、長いコードの断片をコピーする時は CodeBlock を使います。

使い方

value を読み取り専用の一行の入力欄(高さ24px)に出し、欄の末尾にアイコンだけの控えめなボタン(高さ22px)を上下の中央をそろえて置きます。コピーできるとアイコンが緑のチェックに変わり、1.8秒ほどで元のアイコンに戻ります。長い値は欄の中で省略します。

actions には、リンクを作り直すなどの操作をコピーボタンの後に並べます。作り直した値の取得と保存は利用側が行い、新しい value で再描画します。

欄に name は無く、フォームで送信しません。

コピーの処理は ClipboardController、コピーした時のアイコンと読み上げは CopyFieldController が持つので、clipboard と copy-field の両方を登録します。コピーボタンはcontrollerが接続してから表示し、クリップボードへ書き込めないブラウザでは隠したままにします。コピーできなかった時はアイコンを変えず、欄の下にアイコンと赤の12pxの文で failedLabel(既定は「コピーできませんでした。欄の値を選んでコピーしてください。」)を出し、次にコピーの操作をするまで残します。

欄にフォーカスすると値を全て選ぶので、キーボードではそのままブラウザのコピー機能でもコピーできます。

JavaScriptが無い時は、コピーボタンを表示しません。欄の値を選んで、ブラウザのコピー機能でコピーします。

アクセシビリティ

  • コピーボタンはアイコンだけのボタンで、copyLabel を読み上げ名とツールチップにします。
  • コピーできた時は copiedLabel、コピーできなかった時は failedLabel を、見えない role="status" の領域で読み上げます。コピーできなかった通知は色だけでなく、アイコンと文でも示します。

イベント

CopyFieldが発火するイベント
イベント内容
clipboard:beforecopyコピーする前に発火します。取り消せます。detailは text(コピーする値)・source・reason(pointer か keyboard)です。
clipboard:copyコピーを終えた後に発火します。detailは text・source・reason・ok(コピーできたか)・error(コピーできなかった時の DOMException)です。

API

CopyField

公開リンクや招待リンクのような、コピーして使う値の欄。コピーは欄の末尾のアイコンだけのコピーボタンで行い、コピーするとチェックに変わり、しばらくして元に戻る。コピーできなかった時は欄の下にfailedLabelを出す。コピーの処理はClipboardController、結果の表示はCopyFieldControllerが持ち、コピーボタンは接続してから出す。

CopyFieldのprops
名前型既定値説明
id必須string欄のid。ラベルと補足の関連付けに使う。
label必須string欄のラベル。
value必須stringコピーする値。読み取り専用の欄に出し、送信はしない。
helpstring欄の下に出す淡い補足。
copyLabelstring"コピー"コピーボタンの読み上げ名とツールチップ。
copiedLabelstring"コピーしました"コピーできた時に読み上げる文言。
failedLabelstring"コピーできませんでした。欄の値を選んでコピーしてください。"コピーできなかった時に欄の下へ出し、読み上げる文言。欄の値を選んでコピーする方法を含める。
actionsChild欄の末尾に置く操作(リンクを作り直すなど)。

登録するcontroller:clipboard(ClipboardController)、copy-field(CopyFieldController)

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/button.css、components/field.css、components/icon.css、components/copy-field.css

コード

HTML
Hono JSX