![](https://www.kamome-susume.com/wp-content/uploads/2020/06/101166.jpg)
ボタンを押したらコピーできるような機能をjQueryで書きたいけどどう書けばいいんだろう…
こんな疑問を解決します。
この記事で実装するのは、以下のようなものです。
![](https://www.kamome-susume.com/wp-content/uploads/2021/10/9356a86e693887bff41070a5c96619b0.png)
![](https://www.kamome-susume.com/wp-content/uploads/2021/10/9356a86e693887bff41070a5c96619b0.png)
コピーボタンを押す。
![](https://www.kamome-susume.com/wp-content/uploads/2021/10/b3f5206d12ea86fc58709b720496f6df.png)
![](https://www.kamome-susume.com/wp-content/uploads/2021/10/b3f5206d12ea86fc58709b720496f6df.png)
どこでもいいので、貼り付けを行うと、コピーボタンでコピーした内容が貼り付けられることを確認。
このような実装をしていきます。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
ココナラと似てるサイト比較11選!【2023年最新版】
この記事ではココナラに似てる副業サイトを11こ紹介しています。 今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。 本記事のゴール ココ…
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
転職におすすめなサイト11選【リモート・フリーランスも対象】
転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります! この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
Contents
コピーボタンを作成する前にレイアウトを作成
まずはレイアウト作成から。
※bootstrapを導入しています。
<div class="container mt-5">
<input type="text" name="order_site_url" id="order-site-url" class="form-control" value="https://www.laravel.japan" readonly>
<button class="btn btn-sm btn-primary" id="btn-copy-url">コピー</button>
</div>
valueにコピーしたい内容を今回はかき、readonlyにすることでフォームを閲覧のみ可能にしています。readonlyはあってもなくてもいいです。
![](https://www.kamome-susume.com/wp-content/uploads/2021/10/9356a86e693887bff41070a5c96619b0-1.png)
![](https://www.kamome-susume.com/wp-content/uploads/2021/10/9356a86e693887bff41070a5c96619b0-1.png)
上記のようなレイアウトができたでしょうか?
jQueryでコピーボタン機能を作る
以下のように書くことで、コピーボタン押下時に先程のフォームの内容をコピーできます。
// コピーボタン押下時の処理
$('#btn-copy-url').click(function () {
// コピー対象を取得
var copyTarget = $('#order-site-url');
// コピー対象のテキストを選択
copyTarget.select();
// 選択したテキストをクリップボードにコピー
document.execCommand("Copy");
// コピー完了メッセージの表示
alert("URLをコピーしました。");
})
document.execCommand(‘copy’);と書くことで、クリップボードにコピーできます。
これでコピーボタンを押下時にコピーができるようになりました。
【まとめ】jQueryでコピーボタンを作成
今回は、サクッと機能を解説しましたが、あると便利な機能ですよね。
実務で使う場合は、PHPなどと組み合わせて使うと思うので、ぜひ応用してみてくださいね!
他にもこのブログでは実務で役立つ記事を書いているので、合わせてチェックお願いします。
リンク
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2020/12/a9e887bfa478fbd8a741e96287362251-300x158.webp)
ココナラと似てるサイト比較11選!【2023年最新版】
この記事ではココナラに似てる副業サイトを11こ紹介しています。 今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。 本記事のゴール ココ…
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
![](https://www.kamome-susume.com/wp-content/uploads/2021/07/041ddc3101b587b3e24a9ce21e659fe7-300x158.webp)
転職におすすめなサイト11選【リモート・フリーランスも対象】
転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります! この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント