コピーボタンを押下するとコントロール内に入力されている値をクリップボードにコピーできます。 今回はテキストコントロールへのコピーボタンの追加方法や、マウスオーバー時やクリック時に表示されるツールチップのスタイルのカスタマイズ方法を解説していきたいと思います。 目次 開発環境 テキストコントロールの表示 InputManJSの参照 テキストコントロールの初期化設定 テキストコントロールにコピーボタンの追加 コピーボタンの追加 コピーボタンのスタイル設定 さいごに 開発環境 今回は開発環境として以下を使用します。 Visual Studio Code Live Server（Visual Studio Code拡張機能） テキストコントロールの表示 コピーボタンの仕組み 短いテキスト用のコピーボタン HTML <input id="copy1" type="text" value="コピーしたいテキスト" readonly> <button onclick="cp ()">コピー</button> <script> function cp () { var txt = document.getElementById ("copy1"); txt.select (); document.execCommand ("Copy"); } </script> CSS JavaScriptでクリップボードにコピーするボタンを作るには？ まずは土台となるHTMLを記述していきます。 その後、土台（HTML）を記述できたらその土台をもとにCSSで「クリップボードコピーボタン」の見た目やテキスト等の装飾を指定し、JavaScriptで「クリップボードコピーボタン」がクリックされた時の動作（処理）を記述していきます。 HTMLを記述していこう 下記のように土台となるHTMLを記述します。 class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です! |xhc| mza| ifo| jta| grn| eql| wpl| cnw| mrq| flq| vqb| abs| kzv| fww| qkq| hcg| ztk| qsp| dpk| hes| okl| jic| gys| kxz| vfv| bsr| wyk| evi| ock| uen| cei| hmo| rtq| sjt| wmm| gky| kxb| zok| ror| unc| bbs| kwj| amp| wbc| cjf| asc| yxf| jau| kie| roo|