JavaScriptでパスコードの打ち込みUIを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、パスコード打ち込みUIを作成します。

Web上で何らかのサービスを使っている時、パスコードを入力したことがあると思います。その際、文字を入力したら自動的に別の入力欄へ遷移してくれるあの便利な機能を実装しましょう。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

JavaScriptの実装

準備が整ったので、JavaScriptを実装していきましょう。

要素を取得する

最初に、画面操作に必要な要素を取得します。

フォーカス処理1

focusメソッドは、指定した要素にフォーカスをあてることができます。このメソッドは、本アプリケーションの肝なので、覚えておいてください。

ループを回す

先ほど取得した要素は配列形式で取得しているので、ループすることができます。

keydownイベントの登録

パスコードを打ち込んだ時に、keydownイベントを発火するようにします。

フォーカス処理2

指定した条件によって、入力欄にフォーカスを当てます。

入力欄には0~9までの数値しか受け付けられないようにしています。

条件1では、この範囲でキーが入力された場合、次の入力欄にフォーカスされるようにしました。

一方、条件2では、Backspaceキーを打ち込んだら一つ前の入力欄にフォーカスがあたるように指定しました。

加えて、setTimeoutを併用しています。

これは、指定された関数(ここでは無名関数)を指定ミリ秒で実行するメソッドです。これで、すぐに入力欄が切り替わるのではなく、ちょっとフワッとした感じにできます。

おわりに

今回紹介したUIは、Webサービスで見たことありますよね。

見たことがない人もいずれ見る機会があると思います。そうしたら「これもfocusメソッドを使っているのかな」と空想を膨らませてくださいw

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す