inside job: 追記できるセレクトボックス～はんぐりーな僕たちへ～

与えられただけじゃ物足りない！

もっと、はんぐりーなんだ僕たちはっ（°Д°）！
そんな僕たちにぴったりなのが、
ダブルクリックすると追記できるセレクトボックス。

サンプルを示す

何より、サンプルみたらすぐわかるので。
こんな感じ↓↓

セレクトボックスをダブルクリックするか、
セレクトボックス上でキーボードを押す。

どうやって作ってるのか

作り方は単純で、
（１）セレクトボックスのダブルクリックのイベントに、
『テキストボックスを表示して、セレクトボックスを隠す』処置を設定する。
（２）そのテキストボックスからフォーカスが外れたら、
そのテキストボックスの中にあった文字をセレクトボックスの末尾に追加
（selectのoptionを生成して、selectに追加）
あとはテキストボックスを削除。

っていうだけ。

ソースを眺める。

ソースは↓↓こんな感じ。

/**
 * 追記可能なセレクトボックスを生成する。
* 目的のセレクトボックスのイベントにこの関数を追加することで、
* そのセレクトボックスに当該イベントが発生したとき
* テキストボックスを表示する。
* そのテキストボックスからフォーカスがはずれれば、
* 目的のセレクトボックスに、
* テキストボックスに入力された値が追記されている。
* 
 * @example 
 * var prefecture= document.getElementById("prefecture_id");
 * prefecture.addEventListener("dblclick", addEditableSelect, false);
 * 
 */
function addEditableSelect(){
    var newOptionText;
    // テキストボックス生成
    newOptionText = document.createElement("input");
    newOptionText.type = "text";
    newOptionText.value = "";
    newOptionText.style.width = "100px";
    // フォーカスが外れたとき（２）の処理
    addEvent( newOptionText
            , "blur"
            , (function(elm, pSelect){   
                return function(){
                           addTextValueToSelect(elm, pSelect);
                       }
            })(newOptionText, this));
    this.parentNode.appendChild(newOptionText);
    newOptionText.focus();
    this.style.display="none";
}

/**
 * テキストボックスの値を、セレクトボックスに追加する。
* optionもvalueも同じ値である。
 * 
 * @param {Object} textValue テキストボックスオブジェクト
 * @param {Object} originalSelect セレクトボックスオブジェクト
 * 
 * @example 
 * addTextValueToSelect(newOptionText, pSelect);
 * 
 */
function addTextValueToSelect(textValue, originalSelect){
    if (textValue) {
        var addedOption;
        if (textValue.value != "") {
            // テキストボックスに入ってた値を、セレクトボックスの末尾に追加。
            addedOption = document.createElement("option");
            addedOption.value = textValue.value;
            addedOption.appendChild(document.createTextNode(textValue.value));
            addedOption.style.backgroundColor = "#f0f0ff";
            addedOption.selected = true;
            originalSelect.appendChild(addedOption);
        }
        textValue.parentNode.removeChild(textValue);
        originalSelect.style.display="inline";
    }
}

function initializeSelect(){
    var prefecture= document.getElementById("prefecture_id");
    // ダブルクリックのイベントに追加。
    addEvent(prefecture, "dblclick", addEditableSelect);
    // キーボードを押したときのイベントにも追加。
    addEvent(prefecture, "keypress", addEditableSelect);
}

var addEvent = (window.addEventListener ?
               function(element, type, func) {
                   element.addEventListener(type, func, false);
               } :
               function(element, type, func) {
                   element.attachEvent('on' + type, func);
               });
addEvent(window, "load",initializeSelect );

まあ、たしかに。

セレクトボックスか、テキストボックス
をならべて表示して、
どっちの値を採用するのか
サーバ側で判断してもいいんですけどね。

inside job

2011年12月20日火曜日

追記できるセレクトボックス～はんぐりーな僕たちへ～

与えられただけじゃ物足りない！

サンプルを示す

どうやって作ってるのか

ソースを眺める。

まあ、たしかに。

0 件のコメント:

コメントを投稿