Javascript Patchworker - 次のテキストボックスに自動フォーカス

このスクリプトについて
　このコンテンツの中でもこれが果たす役割は相当地味ですが、たまに使っているサイトがいて「おおっ！」と思うことはたまにありますね。入力するたび細かくTABを押すのは相当ストレスがたまりますし、設置も簡単ですからぜひ試してみてください。

実行例
Zip-code：-
Address：

関連

対応ブラウザ
WIN IE 4.0～ NN 6.0～　MAC IE 4.0～ NN 6.0～

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>次のテキストボックスにフォーカス</title>
<style type="text/css">

</style>
<script type="text/javascript">
<!--
//ユーザが設定する変数----------------------------------
  //対象となるフォームの要素のIDを順番に
  var target = new Array();
  target[0] = "former";
  target[1] = "latter";
  target[2] = "address";
  //対象となるフォームの要素の文字数の最大値
  var focus = new Array();
  focus[0] = 3;
  focus[1] = 4;
//------------------------------------------------------

function next(n){
  if (document.getElementById){
    f = document.getElementById(target[n]).value;
    if (f.length < focus[n]) return true;
    document.getElementById(target[n]).blur();
    document.getElementById(target[n+1]).focus();
  }
}
//-->
</script>
</head>
<body>
Zip-code：<input type="text" size="3" id="former" onKeyUp="next(0)">-
<input type="text" size="4" id="latter" onKeyUp="next(1)"><br>
Address：<input type="text" id="address" size="20"><br>
</body>
</html>

ユーザ設定
　ユーザーが設定する変数は、target配列、focus配列です。
　target配列郵便番号などの対象となるフォームの要素を上から順番に記述し、すべての要素を入力し終わったあとに移動する要素のIDを最後に記述してください。
　focus配列にはそれぞれの要素の最大文字数を記述してください。
　onKeyUpなどという見慣れないイベントハンドラが出てきました。これはキーボードから指が離れたことに反応してイベントを起こすハンドラです。また、呼び出すnext関数の引数には、target配列での添え字（[　]内の数字）の番号を記述してください。

JavaScriptのTOPに戻る　　

TOPに戻る