2009年11月26日木曜日

【javascript】テキストボックスとセレクトボックスの連動

最近、忙しすぎて全く更新していませんでした。反省。m(__)m

忙しいことを言い訳にする。これが「ダメ男」の始まりだ!!!

誰も見ていなくたっていんです。

どんなことでも、続けることに意義がある」これは教訓。

つうことで、本題。今回の要件でテキストボックスに入力した値をサーバと連携せずに、セレクトボックスに追加し、登録ボタンを押したタイミングでセレクトボックスに溜め込んだ値をサーバに登録するということだった。マンドクセ。

今なら「jquery」とかのライブラリを使うのがいいと思うけど、導入できないとこもあると思うので、素で書いてみた。

まずはjavascriptから

/*
* エンターキーが押されたら追加ボタンに
* フォーカスを移します(IE専用)
*/
function moveFocus() {
if(event.keyCode==13) {
document.getElementById('addBtn').focus()
}
}

/*
* テキストボックスに入力した値を
* セレクトボックスに追加する。
*/
var count = 0;
function add() {
var val = myForm.txtBox.value;

if ( val == "" ) {
return;
}

with(myForm.selectBox) {
options[count] = new Option(val);
//追加した値を選択状態にするため、50ミリ秒待つ(これ重要!)
window.setTimeout(function() {
return function() {
var len = options.length - 1;
options[len].selected = true;
}
}(this), 50);

myForm.txtBox.value = "";
myForm.txtBox.focus();
}

count++ ;
}

/*
* セレクトボックスから選択した値を
* 削除します。
*/
function del() {
var s = myForm.selectBox.options.selectedIndex;
myForm.selectBox.options[s] = null;
count--;
}

上記で注意するなら、まさにコメントを書いているところ。

恐らくですが、セレクトボックスに追加して表示されるまで、タイムラグがあるためか、すぐに選択状態にしようとするとうまくいかない。なので御呪いです^^;

あとはこのjavascriptを使うhtmlです。

<body>
<form name="myForm">
<!-- エンタキーによる送信の抑止 -->
<input type="text" name="dummy" style="position:absolute;visibility:hidden">
<table>
<tr>
<td>入力</td>
<td>
<input type="text" name="txtBox" maxlength="10" size="12" class="num" onkeypress="moveFocus()">
</td>
<td>
<a href="#" onClick="add()" id="addBtn">追加</a>


<a href="#" onClick="del()">削除</a>
</td>
<td>
<select name="selectBox" size="2" >
</select>
</td>
</tr>
</table>
</form>
</body>
特に説明は必要ないと思いますが、コメントのところは要注意です。

フォーム上にテキストボックスが一つしかない場合に、テキストボックス上でエンタキーを押すと、勝手に(便利だけど余計なお世話)送信されるのを抑止するために隠しテキストボックスを入れています。

また、テキストボックスに値を入力した後にエンターキーを連打することで、セレクトボックスに値が追加され、連続入力を行えるようにしています。ユーザビリティってやつですかね・・・。ウゼ

IE8とFirefox3.0で動作確認しています。
※但しエンタキーの動作はIEのみです。

0 件のコメント: