最近、忙しすぎて全く更新していませんでした。反省。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 コメント:
コメントを投稿