タップでコピー！ユーザーに優しいボタンの作り方

お仕事では自社ECサイトの制作をしているのですが、割引系等のタップでク―ポンコードをGET！のボタンは、そのボタンをクリックした人数と実際に使われた数がわかったりするのでよく使います。

▲こんなのの下部分を目標に作ってみます～

1.まずは完成図から

FontAwesomeのFree版でアイコンも設定してみました！タップするとアラートが出る仕様です。

2.css

<style>

/* コピーターゲット */
input[type="submit"] {

	/* inputタグのリセット */
	-webkit-appearance: none;
	border-radius: 0;

	/* 枠＆余白の設定 */
	background:#FFFFFF;
	border-radius: 3px;
	border: #b3a275 solid 2px;
	width: 90%;	
	height:40px;
	margin:0 5%;

	/* ターゲットテキストの設定 */
	color: #000;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;

	/* 縦横中央揃え */
	text-align: center;
	line-height: 30px;


	/* アイコン部分の設定 */
	font-family: "Font Awesome 5 Free"; 
｝

</style>

3.html

	<div class="q_copy">
	
	<!-- コピー対象要素とコピーボタン -->
	<input id="copyTarget" class="copy_btn" type="submit"  onclick="copyToClipboard()" value="&#xf144; タップでクーポンコードをGET!!"  readonly>
	
	</div>

valueが表示されるテキストになるのですが、アイコンを使う場合は

&#x　＋　アイコンの番号;

で表記します！！今回は↓のf144を使用したので、と書いております！

▼ページ内の黄色部分をチェックです

▼めっちゃ使えるアイコンはこちらから

Font Awesome

Freeでもめっちゃ使えるのでブックマーク必須です！！サーチアイコンのところから探せますよ～～

4.js

    <!-- bodyタグ内の下部に以下を入力する -->
   <script>
       function copyToClipboard() {
       
           // コピー対象をJavaScript上で変数として定義する
           var copyTarget = document.getElementById("copyTarget");
           
           // コピー対象のテキストを選択する
           copyTarget.select();
           
           // 選択しているテキストをクリップボードにコピーする
           document.execCommand("Copy");
           
           // コピーをお知らせする
           alert("[ テスト ]をコピーしました！ : ");
       }
   </script>  

5.head内に

▼下記がFontAwesomeの読み込みになります！

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

6.まとめ

めちゃめちゃ紆余曲折ありの完成です！！jsまだあまり慣れないのですが、書いてあることの理解はできたような、、、使えるようになったら出来ることの幅が広がりそうなので、これからもいろいろ見ながらちょっとずつ使えるようになっていこうと思います！