こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、パスコード打ち込みUIを作成します。
Web上で何らかのサービスを使っている時、パスコードを入力したことがあると思います。その際、文字を入力したら自動的に別の入力欄へ遷移してくれるあの便利な機能を実装しましょう。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Verify Account</title> </head> <body> <div class="container"> <h2>Verify Your Account</h2> <p>We emailed you the six digit code to cool_guy@email.com <br/> Enter the code below to confirm your email address.</p> <div class="code-container"> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> </div> <small class="info"> This is design only. We didn't actually send you an email as we don't have your email, right? </small> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイル(CSS)を装飾
次は、ページにスタイルをつけます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap'); * { box-sizing: border-box; } body { background-color: #fbfcfe; font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { background-color: #fff; border: 3px #000 solid; border-radius: 10px; padding: 30px; max-width: 1000px; text-align: center; } .code-container { display: flex; align-items: center; justify-content: center; margin: 40px 0; } .code { border-radius: 5px; font-size: 75px; height: 120px; width: 100px; border: 1px solid #eee; margin: 1%; text-align: center; font-weight: 300; -moz-appearance: textfield; } .code::-webkit-outer-spin-button, .code::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .code:valid { border-color: #3498db; box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25); } .info { background-color: #eaeaea; display: inline-block; padding: 10px; line-height: 20px; max-width: 400px; color: #777; border-radius: 5px; } @media (max-width: 600px) { .code-container { flex-wrap: wrap; } .code { font-size: 60px; height: 80px; max-width: 70px; } } |
ここまで実装すると以下のようになります。
JavaScriptの実装
準備が整ったので、JavaScriptを実装していきましょう。
要素を取得する
最初に、画面操作に必要な要素を取得します。
|
1 2 |
// 要素の取得 const codes = document.querySelectorAll('.code') |
フォーカス処理1
focusメソッドは、指定した要素にフォーカスをあてることができます。このメソッドは、本アプリケーションの肝なので、覚えておいてください。
|
1 2 |
// 1文字目にフォーカス codes[0].focus() |
ループを回す
先ほど取得した要素は配列形式で取得しているので、ループすることができます。
|
1 2 3 4 |
// 要素のループ codes.forEach((code, idx) => { ... 何らかの処理を行う }) |
keydownイベントの登録
パスコードを打ち込んだ時に、keydownイベントを発火するようにします。
|
1 2 3 4 5 6 7 |
codes.forEach((code, idx) => { // keydownイベントの登録 code.addEventListener('keydown', (e) => { ... }) }) |
フォーカス処理2
指定した条件によって、入力欄にフォーカスを当てます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
codes.forEach((code, idx) => { code.addEventListener('keydown', (e) => { // 条件1: 0 ~ 9が打ち込まれた時 if(e.key >= 0 && e.key <=9) { codes[idx].value = '' setTimeout(() => codes[idx + 1].focus(), 10) // 条件2: Backspaceが打ち込まれた時 } else if(e.key === 'Backspace') { setTimeout(() => codes[idx - 1].focus(), 10) } }) }) |
入力欄には0~9までの数値しか受け付けられないようにしています。
|
1 |
<input type="number" class="code" placeholder="0" min="0" max="9" required> |
条件1では、この範囲でキーが入力された場合、次の入力欄にフォーカスされるようにしました。
一方、条件2では、Backspaceキーを打ち込んだら一つ前の入力欄にフォーカスがあたるように指定しました。
加えて、setTimeoutを併用しています。
これは、指定された関数(ここでは無名関数)を指定ミリ秒で実行するメソッドです。これで、すぐに入力欄が切り替わるのではなく、ちょっとフワッとした感じにできます。
おわりに
今回紹介したUIは、Webサービスで見たことありますよね。
見たことがない人もいずれ見る機会があると思います。そうしたら「これもfocusメソッドを使っているのかな」と空想を膨らませてくださいw
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 要素の取得 const codes = document.querySelectorAll('.code') // 1文字目にフォーカス codes[0].focus() // 要素のループ codes.forEach((code, idx) => { // keydownイベントの登録 code.addEventListener('keydown', (e) => { // 0 ~ 9が打ち込まれた時 if(e.key >= 0 && e.key <=9) { codes[idx].value = '' setTimeout(() => codes[idx + 1].focus(), 10) // Backspaceが打ち込まれた時 } else if(e.key === 'Backspace') { setTimeout(() => codes[idx - 1].focus(), 10) } }) }) |
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/190f24cd.7532be9b.190f24ce.766b3442/?me_id=1213310&item_id=18177978&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4111%2F9784774184111.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。