JavaScriptの .focus()
メソッドとfor文のループで、テキストフィールドに入力していくとフォーカスが自動で移っていくスニペットを作ります。
今回はクレジットカードの入力欄をモチーフにした、16桁想定のフォームでサンプルを作っています。
是非、最後までご覧いただけたら嬉しいです。
.focus()
JavaScriptの .focus()
は、指定された要素にフォーカスを設定するメソッドです。
clearform.reset();
フォーカスを設定できる場合、指定した要素にフォーカスを当てていき、この記事では文字を入力していくことで、4つ並んだテキストフィールドのフォーカスが移っていきます。
最大文字数を入力するとフォーカスが移るサンプル
早速サンプルです。
サンプルでは、クレジットカードのような全16桁の数字を4つのフィールドで区切り、各テキストフィールドに4桁を入力するごとに focus
が移ります。
focus
が次のフィールドに移ることで、ユーザーはその次のフィールドを選択することなく、そのまま入力を続けることができます。
ボタンクリックで、フォームに入力した内容をクリアすることも可能です。
実装の手順と方法
コードの解説の前に、サンプルの実装手順と方法について解説していきます。
まずは、以下の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で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を記述して、見た目を整えます。
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;
}
デザインに関する記述はないので、このコードをそのまま使いつつ見た目をいじる場合は、プロパティを色々追加して使いましょう。
さいごに
input
のフィールドは、最大文字数がそれぞれ設定できるので、応用すれば電話番号の入力欄にも利用可能です。
フォームに使われる入力フィールドをよくするだけで、離脱率も低くすることができるので、是非参考にしてみてください。