今日の人気記事

まだデータがありません。

入力フォームのフォーカスを自動でタブ移動「Autotab」

当ページのリンクには広告が含まれています。

スポンサーリンク

入力フォームのフォーカスを自動でタブ移動してくれるプラグイン「Autotab」を紹介します。

jQueryプラグイン「Autotab」

入力文字が、input要素のmaxlength属性(文字数)に指定した文字数に達すると次の入力フォームに自動でタブ移動します。

また、オプションでは入力できる文字を数字、テキスト、アルファベットだけに制限することもできるので、ユーザーに親切なフォームを作成することができます。

スポンサーリンク

デモの入力フォームをご覧ください。

「Autotab」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Tocibleのデモでーす。">
<title>Autotab - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.autotab.js"></script>
<script>
$(function () {
    $('input[type=text]').autotab();
    $('.number').autotab('filter', 'number');
    $('.alpha').autotab('filter', 'alpha');
});
</script>
</head>
<body>
<h1>Autotabタブのデモでーす。</h1>
<div>
  <label for="number1">電話番号(数字だけ)</label><br />
  <input type="text" id="number1" class="number" maxlength="3" size="3" />
  -
  <input type="text" id="number2" class="number" maxlength="3" size="3" />
  -
  <input type="text" id="number3" class="number" maxlength="4" size="5" />
</div>
<div>
  <label for="number1">ID(アルファベットだけ)</label><br />
  <input type="text" class="alpha" maxlength="5" size="5" />
  -
  <input type="text" class="alpha" maxlength="5" size="5" />
</div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)