未入力欄にフォーカス
（手順）
(1)全入力フィールドを、getElementsByTagName("input")メソッドで取得する。
(2)各フィールドの値をvalueプロパティによってチェックする。
(3)空の場合はfocus()メソッドを使ってフォーカスを当てる。
<![CDATA[
function check()
{
var inp = document.getElementsByTagName("input");
for(var i=0; i<inp.length; i++){ if( !inp[i].value || inp[i].value == "" ){ // 値が空 inp[i].focus(); // フォーカスを当てる return; } } } ]]>
<![CDATA[
<form>
テキスト1 <input type="text" name="text1" /><br />
テキスト2 <input type="text" name="text2" /><br />
パスワード <input type="password" name="pass" /><br />
ファイル <input type="file" name="file" /><br />
<input type="button" value="チェック" onclick="check()" />
</form>
]]>
エンターキー無効
テキスト入力中にエンターキーを押すと、(日本語入力中は確定後にエンターキーを押す)、大抵のブラウザではフォームを送信します。
フォームの入力を終える前に誤って送信してしまうことのないように、エンターキーが送られてもそれを無視するようにします。
<![CDATA[
function blockEnter(evt) {
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode :
((evt.which) ? evt.which : evt.keyCode);
if (charCode == 13) {
return false;
} else {
return true;
}
}
]]>
<![CDATA[
<input type="text" onkeydown="return blockEnter(event)">
]]>
フォーカス移動
上記「エンターキー無効」のコードの応用例。
エンターキーを押した時に次のフィールドにフォーカスを移動します。
全てのテキスト入力フィールドのonkeypressイベントから当関数を呼び出し、その時に次の入力フィールド名を指定します。
formタグ中では、onsubmit="return false"を使って全ての送信をブロックします。
<![CDATA[
function focusNext(form, elemName, evt) {
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode :
((evt.which) ? evt.which : evt.keyCode);
if (charCode == 13) {
form.elements[elemName].focus();
return false;
}
return true;
}
]]>
<![CDATA[
<form action="#" onsubmit="return false">
テキスト１：<input type="text" name="name1" onkeypress="return focusNext(this.form, 'name2', event)"><br>
テキスト２：<input type="text" name="name2" onkeypress="return focusNext(this.form, 'name3', event)"><br>
テキスト３：<input type="text" name="name3" onkeypress="return focusNext(this.form, 'sbm', event)"><br>
<input type="button" name="sbm" value="送信" onclick="this.form.submit()" />
</form>
]]>
タブ移動
クレジットカード番号入力のように、各々４文字を４つの部分に分けて入力する際、自動的にタブ移動します。
<![CDATA[
function autofocus(field, limit, next, evt) {
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
((evt.which) ? evt.which : 0));
if (charCode > 31 && field.value.length == limit) {
field.form.elements[next].focus();
}
}
]]>
<![CDATA[
<form action="#">
<input type="text" name="cc1" size="5" maxlength="4" onkeyup="autofocus(this, 4, 'cc2', event)">
<input type="text" name="cc2" size="5" maxlength="4" onkeyup="autofocus(this, 4, 'cc3', event)">
<input type="text" name="cc3" size="5" maxlength="4" onkeyup="autofocus(this, 4, 'cc4', event)">
<input type="text" name="cc4" size="5" maxlength="4" >
</form>
]]>
