JavaScriptで実装するログインフォームの自動補完後の自動遷移機能

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基本的な知識があるWeb開発者、特にフォーム機能を実装したい方を対象にしています。特に、ユーザビリティを向上させるためのログインフォームの自動補完機能と、その選択後の自動遷移機能の実装方法について解説します。

この記事を読むことで、ログインフォームの自動補完機能の基本的な実装方法がわかり、さらに選択後に自動で次の入力フィールドに移動する機能を実装できるようになります。また、実装中によくある問題とその解決策についても学ぶことができます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識 - JavaScriptの基本的な知識

ログインフォームの自動補完機能の概要と重要性

ログインフォームは、WebサイトやWebアプリケーションにおいて最も基本的な機能の一つです。ユーザーが毎回ユーザー名やメールアドレス、パスワードを手入力するのは面倒であり、特にモバイル環境では入力が困難な場合があります。

自動補完機能は、ユーザーが入力を始めた際に過去の入力履歴や予測候補を表示し、ユーザーが簡単に選択できるようにする機能です。さらに、選択後に自動で次の入力フィールドに移動する機能を実装することで、ユーザーはよりスムーズにログイン操作を完了できます。

このような機能を実装することで、ユーザビリティが大幅に向上し、ユーザーの離脱を防ぐことが期待できます。特に、頻繁にログインを行うユーザーにとっては、このような小さな改善が大きな満足度の差となります。

自動補完と自動遷移機能の具体的な実装方法

ステップ1：HTMLフォームの基本構造の作成

まずは、ログインフォームの基本的なHTML構造を作成します。以下に、ユーザー名/メールアドレス入力欄とパスワード入力欄を持つフォームの例を示します。

Html

<form id="loginForm">
  <div class="form-group">
    <label for="username">ユーザー名/メールアドレス</label>
    <input type="text" id="username" name="username" autocomplete="username" required>
  </div>
  <div class="form-group">
    <label for="password">パスワード</label>
    <input type="password" id="password" name="password" autocomplete="current-password" required>
  </div>
  <button type="submit">ログイン</button>
</form>

ポイントとなるのは、autocomplete属性です。この属性を設定することで、ブラウザが自動補完機能を有効にし、ユーザーの入力を補助してくれます。

ステップ2：JavaScriptによる自動補完機能の実装

次に、JavaScriptを使って自動補完機能を実装します。ここでは、ユーザーが入力を始めた際に、過去のログイン履歴から候補を表示する例を示します。

Javascript

document.addEventListener('DOMContentLoaded', function() {
  const usernameInput = document.getElementById('username');
  const suggestions = document.createElement('div');
  suggestions.className = 'suggestions';
  suggestions.style.display = 'none';
  usernameInput.parentNode.appendChild(suggestions);

  // 過去のログイン履歴を取得（実際の実装ではlocalStorageやAPIから取得）
  const loginHistory = ['user1@example.com', 'user2@example.com', 'admin'];

  usernameInput.addEventListener('input', function() {
    const value = this.value.toLowerCase();
    suggestions.innerHTML = '';

    if (value.length > 0) {
      const matches = loginHistory.filter(item => item.toLowerCase().includes(value));

      if (matches.length > 0) {
        matches.forEach(match => {
          const suggestionItem = document.createElement('div');
          suggestionItem.className = 'suggestion-item';
          suggestionItem.textContent = match;
          suggestionItem.addEventListener('click', function() {
            usernameInput.value = match;
            suggestions.style.display = 'none';
            // 自動で次の入力フィールドに移動
            document.getElementById('password').focus();
          });
          suggestions.appendChild(suggestionItem);
        });
        suggestions.style.display = 'block';
      } else {
        suggestions.style.display = 'none';
      }
    } else {
      suggestions.style.display = 'none';
    }
  });

  // フォームの外側をクリックした際に候補を非表示にする
  document.addEventListener('click', function(e) {
    if (!usernameInput.contains(e.target) && !suggestions.contains(e.target)) {
      suggestions.style.display = 'none';
    }
  });
});

このコードでは、ユーザーが入力を始めると、入力値に一致するログイン履歴をフィルタリングし、候補として表示します。ユーザーが候補をクリックすると、入力欄に値が設定され、自動でパスワード入力欄にフォーカスが移ります。

ステップ3：CSSによるスタイリング

自動補完の候補リストを視覚的に分かりやすくするため、CSSでスタイリングします。

Css

.suggestions {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background-color: white;
  z-index: 1000;
}

.suggestion-item {
  padding: 8px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}

ハマった点やエラー解決

複数の入力フィールドがある場合の対応

実際のログインフォームでは、ユーザー名/メールアドレスの入力欄とパスワードの入力欄の他に、セキュリティのためのCAPTCHAや「ログイン状態を保持する」チェックボックスなど、様々な要素が含まれることがあります。

このような場合、自動遷移のロジックが複雑になることがあります。特に、入力フィールドの順序がブラウザやデバイスによって異なる場合があります。

解決策： 1. 入力フィールドにtabindex属性を設定して、タブ移動の順序を明示的に指定します。 2. フォームの構造をシンプルに保ち、自動遷移のロジックが適用されるべきフィールドを特定します。

Html

<input type="text" id="username" name="username" autocomplete="username" tabindex="1" required>
<input type="password" id="password" name="password" autocomplete="current-password" tabindex="2" required>
<input type="checkbox" id="remember" name="remember" tabindex="3">
<label for="remember">ログイン状態を保持する</label>
<button type="submit" tabindex="4">ログイン</button>

ブラウザごとの挙動の違い

ブラウザによっては、自動補完の挙動が異なる場合があります。特に、モバイルブラウザでは、キーボードの表示や非表示のタイミングが異なり、自動遷移のタイミングがずれることがあります。

解決策： 1. イベントリスナーを適切に設定し、ブラウザごとの挙動の違いを考慮します。 2. モバイルブラウザ向けに、タッチイベントも考慮した実装を行います。

Javascript

// モバイルブラウザ向けの対応
usernameInput.addEventListener('blur', function() {
  // 少し遅延させて、キーボードが閉じるのを待つ
  setTimeout(function() {
    if (suggestions.style.display === 'block') {
      // 候補が表示されている場合は、選択を促す
      suggestions.focus();
    }
  }, 300);
});

解決策：より堅牢な実装

上記の問題点を踏まえ、より堅牢な実装を行います。以下に、改善されたJavaScriptコードの例を示します。

Javascript

document.addEventListener('DOMContentLoaded', function() {
  const usernameInput = document.getElementById('username');
  const passwordInput = document.getElementById('password');
  const suggestions = document.createElement('div');
  suggestions.className = 'suggestions';
  suggestions.setAttribute('tabindex', '-1'); // キーボード操作可能にする
  suggestions.style.display = 'none';
  usernameInput.parentNode.appendChild(suggestions);

  // 過去のログイン履歴を取得
  const loginHistory = JSON.parse(localStorage.getItem('loginHistory')) || [];

  // 重複を削除し、最近使用したものを先頭にする
  const uniqueHistory = [...new Set(loginHistory)].reverse();

  usernameInput.addEventListener('input', function() {
    const value = this.value.toLowerCase();
    suggestions.innerHTML = '';

    if (value.length > 0) {
      const matches = uniqueHistory.filter(item => item.toLowerCase().includes(value));

      if (matches.length > 0) {
        matches.forEach(match => {
          const suggestionItem = document.createElement('div');
          suggestionItem.className = 'suggestion-item';
          suggestionItem.textContent = match;
          suggestionItem.setAttribute('tabindex', '0');
          suggestionItem.addEventListener('click', function() {
            selectSuggestion(match);
          });
          suggestionItem.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              selectSuggestion(match);
            }
          });
          suggestions.appendChild(suggestionItem);
        });
        suggestions.style.display = 'block';
        suggestions.focus(); // 候補リストにフォーカスを移す
      } else {
        suggestions.style.display = 'none';
      }
    } else {
      suggestions.style.display = 'none';
    }
  });

  function selectSuggestion(value) {
    usernameInput.value = value;
    suggestions.style.display = 'none';
    // 自動で次の入力フィールドに移動
    passwordInput.focus();

    // ログイン履歴に追加（重複を避ける）
    if (!loginHistory.includes(value)) {
      loginHistory.unshift(value);
      if (loginHistory.length > 10) {
        loginHistory.pop(); // 10件まで保持
      }
      localStorage.setItem('loginHistory', JSON.stringify(loginHistory));
    }
  }

  // フォームの外側をクリックした際に候補を非表示にする
  document.addEventListener('click', function(e) {
    if (!usernameInput.contains(e.target) && !suggestions.contains(e.target)) {
      suggestions.style.display = 'none';
    }
  });

  // 候補リスト内でのキーボード操作
  suggestions.addEventListener('keydown', function(e) {
    const items = suggestions.querySelectorAll('.suggestion-item');
    const currentFocus = document.activeElement;

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      if (currentFocus === suggestions) {
        items[0].focus();
      } else {
        const index = Array.from(items).indexOf(currentFocus);
        if (index < items.length - 1) {
          items[index + 1].focus();
        }
      }
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      if (currentFocus === suggestions) {
        items[items.length - 1].focus();
      } else {
        const index = Array.from(items).indexOf(currentFocus);
        if (index > 0) {
          items[index - 1].focus();
        } else {
          suggestions.focus();
        }
      }
    } else if (e.key === 'Escape') {
      suggestions.style.display = 'none';
      usernameInput.focus();
    }
  });
});

この改善版では、以下の点が追加されています。 1. ローカルストレージを利用して、ユーザーのログイン履歴を保存・復元する機能 2. キーボード操作による候補の選択（矢印キー、Enterキー、Escapeキー） 3. 最近使用したログイン情報を優先表示する機能 4. 候補リスト内でのキーボードナビゲーション

まとめ

本記事では、JavaScriptを使ってログインフォームの自動補完機能を実装し、選択後に自動で次の入力フィールドに移動する方法について解説しました。

HTMLフォームの基本構造の作成方法
JavaScriptによる自動補完機能の実装方法
選択後の自動遷移機能の実装方法
複数の入力フィールドやブラウザごとの挙動の違いへの対応方法

この記事を通して、ユーザビリティを向上させるログインフォームの実装方法について学ぶことができたと思います。実際のプロジェクトでは、セキュリティやアクセシビリティの観点からさらに詳細な検討が必要ですが、ここで紹介した基本的な実装をベースにして、さらに機能を拡張していくことが可能です。

今後は、パスワードマネージャーとの連携や、より高度な自動補完アルゴリズムの実装などについても記事にする予定です。

JavaScriptで実装するログインフォームの自動補完後の自動遷移機能🔑