.focus()

JavaScriptの.focus()でフォームに最大文字数を入力するとフォーカスが移る

2022年9月7日 5分

JavaScriptの .focus() メソッドとfor文のループで、テキストフィールドに入力していくとフォーカスが自動で移っていくスニペットを作ります。

かかかず

今回はクレジットカードの入力欄をモチーフにした、16桁想定のフォームでサンプルを作っています。

是非、最後までご覧いただけたら嬉しいです。

.focus()
最大文字数を入力するとフォーカスが移るサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.focus()

JavaScriptの .focus() は、指定された要素にフォーカスを設定するメソッドです。

clearform.reset();

フォーカスを設定できる場合、指定した要素にフォーカスを当てていき、この記事では文字を入力していくことで、4つ並んだテキストフィールドのフォーカスが移っていきます。

フォーカスとは

フォーカスとは、フォームの入力やキーボードの「tab」で要素などを選択している状態のことを指します。例えば、フォームの入力欄にカーソルを合わせてテキスト入力できるような状態です。

最大文字数を入力するとフォーカスが移るサンプル

早速サンプルです。

サンプルでは、クレジットカードのような全16桁の数字を4つのフィールドで区切り、各テキストフィールドに4桁を入力するごとに focus が移ります。

focus が次のフィールドに移ることで、ユーザーはその次のフィールドを選択することなく、そのまま入力を続けることができます。

かかかず

ボタンクリックで、フォームに入力した内容をクリアすることも可能です。

実装の手順と方法

コードの解説の前に、サンプルの実装手順と方法について解説していきます。

HTMLを記述

まずは、以下のHTMLタグを任意の場所に記述します。

コードを表示

<form id="informBlock" name="inform">
  <input type="text" id="formtxt1" maxlength="4" onkeyup="setNextFocus(this)" />
  <input type="text" id="formtxt2" maxlength="4" onkeyup="setNextFocus(this)" />
  <input type="text" id="formtxt3" maxlength="4" onkeyup="setNextFocus(this)" />
  <input type="text" id="formtxt4" maxlength="4" onkeyup="setNextFocus(this)" />
</form>
<button id="clearBtn">入力をクリア</button>

JavaScriptを記述

次に、JavaScriptでSwiperのオプションを記述します。

コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// 関数
function setNextFocus(obj){
  if(obj.value.length >= obj.maxLength){
    var textinput = document.inform.elements;
　　　　　　　　// ループでinputのカウント
    for(var i=0;i < textinput.length; i++){
      if(textinput[i] == obj){
        textinput[i+1].focus();
        // 繰り返し処理を終了
        break;
      }
    }
  }
}

// ボタンクリックで入力クリア
document.getElementById('clearBtn').addEventListener('click', () => {
  // フォームを取得
  const clearform = document.getElementById('informBlock');
  // フォームの内容をリセット
  clearform.reset();
});

CSSを記述

最後にCSSを記述して、見た目を整えます。

コードを表示

form#informBlock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}
form#informBlock input {
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
}

ざっくりとしたコードの解説

それでは、コードの解説をざっくりですがしていきます。

コードは、フォーム要素のHTMLと、フォーカスを移す・入力をクリアするJavaScript。そして、レイアウトを整えるCSSの3種類で、これらを順に解説していきます。

HTML

HTMLは、親要素の form タグにテキストフィールドの input タグが4つ並んだ構造で、フォームの下には「入力クリア」を行う button タグでできています。

<form id="informBlock" name="inform">
  <input type="text" id="formtxt1" maxlength="4" onkeyup="setNextFocus(this)" />
  <input type="text" id="formtxt2" maxlength="4" onkeyup="setNextFocus(this)" />
  <input type="text" id="formtxt3" maxlength="4" onkeyup="setNextFocus(this)" />
  <input type="text" id="formtxt4" maxlength="4" onkeyup="setNextFocus(this)" />
</form>
<button id="clearBtn">入力をクリア</button>

テキストフィールとの最大文字数は、input タグに「maxlength」属性で指定をします。サンプルでは、4の設定で最大文字数を設定して、onkeyup のイベントハンドラでJavaScriptの紐付けを行い、フォーカスを移していきます。

JavaScript

JavaScirptは、「大きく分けてテキストフィールドのフォーカスを移す」と「ボタンクリックでフォームの入力クリア」の2種類です。

詳細は、コメントアウトの通りですが、コード冒頭にはHTMLのイベントハンドラで設定した関数 setNextFocus(this) で、処理内容を書いていきます。

// 関数
function setNextFocus(obj){
  if(obj.value.length >= obj.maxLength){
    var textinput = document.inform.elements;
　　　　　　　　// ループでinputのカウント
    for(var i=0;i < textinput.length; i++){
      if(textinput[i] == obj){
        textinput[i+1].focus();
        // 繰り返し処理を終了
        break;
      }
    }
  }
}

// ボタンクリックで入力クリア
document.getElementById('clearBtn').addEventListener('click', () => {
  // フォームを取得
  const clearform = document.getElementById('informBlock');
  // フォームの内容をリセット
  clearform.reset();
});

フォームのクリアは、JavaScriptの .reset() メソッドを使います。.reset() メソッドは、テキストボックスやチェックボックスなど、フォームの要素を初期値に戻します。

CSS

CSSは、form タグの子要素 input タグを横並びで配置する flexbox を交えたレイアウトに関する記述です。

form#informBlock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}
form#informBlock input {
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
}

デザインに関する記述はないので、このコードをそのまま使いつつ見た目をいじる場合は、プロパティを色々追加して使いましょう。