#blognavi
前回のエントリで書いたHTML版コンボボックスを改良してみた。
変更点は、リストボックスを絶対位置指定にして、表示した時にレイアウトが変わらないようにしたことと、リストボックスの親要素次第で指定した位置の意味が変わらないよう、各要素をSPANタグで囲ったこと。
前回使ってた<BR>タグもなくなり、単一要素と同じ感覚でインライン配置できるようになった。
使い勝手としても、前回のものよりコンボボックスの操作感に近づいたと思う。
注意点は、リストボックスのアイテム数が多くて画面下端より下にはみ出てもブラウザにスクロールバーが出現しないこと。それとリストボックスからキーボード操作で選択できないこと。
<HTML>
<HEAD>
<TITLE>擬似コンボボックス２</TITLE>
<STYLE type="text/css">
.ComboButton {
font-size : 9px;
position : relative;
left : -2px;
top : -1px;
width : 17px;
height : 20px;
}
.ComboList {
position : absolute;
left : -2px;
top : 20px;
z-index : 2;
visibility : hidden;
}
</STYLE>
<SCRIPT Language="JavaScript">
function ShowList(Num) {
var ListBox = document.getElementById("List_" + Num);
ListBox.selectedIndex = -1;
ListBox.size = ListBox.length;
ListBox.style.visibility = "visible";
// いきなりfocusするとonBlurが変に発生するので10ミリ秒後にfocusする。
setTimeout("document.Form1.List_" + Num + ".focus()", 10);
}
function HideList(Num) {
ListBox = document.getElementById("List_" + Num);
ListBox.style.visibility = "hidden";
ListBox.size = 1;
}
function Selected(Num) {
TextBox = document.getElementById("Text_" + Num);
ListBox = document.getElementById("List_" + Num);
// TextBoxをfocusする。ListBoxにonBlurイベントが発生しHideListが呼ばれる
TextBox.focus();
var index = ListBox.selectedIndex;
TextBox.value = ListBox.options[index].value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="Form1">
<SPAN style="position:relative">
<INPUT type="text" name="Text_1" style="width:80"><!-- ※本コメントブロックは本来不要（atwiki表示調整用）
--><INPUT type="button" class="ComboButton" value="▼" onClick="ShowList(1)">
<SELECT name="List_1" class="ComboList" style="width:100" onChange="Selected(1)" onBlur="HideList(1)">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
</SELECT>
</SPAN>
</FORM>
</BODY>
</HTML>
あと実現したい機能は2つ。
* テキストボックスの入力済文字で、セレクトボックスのアイテムを絞り込む
* セレクトボックスのキーボード操作対応
この2つができれば良いんだけど、ちょっとコーディング量が増えそうなので放置の方向で。
カテゴリ: [
Program] - &trackback() - 2009年04月24日 00:06:44
#blognavi
最終更新：2009年04月24日 00:18
