jquery - 選擇和輸入框組合

Question

我想做一個組合選擇框和文本輸入。這是我希望如何工作的。

1. 用戶看到舊值
2. 點擊舊值提供了一個組合的文本框，然後選擇下拉框
3. 用戶可以輸入文本或選擇選擇哪種選項
4. 成爲新值

我已經能夠做到這一點，你可以在這裏看到它。

http://jsfiddle.net/jfoxworth/X5BTD/

然而，當有人側重於輸入他們不能然後到下拉框，而不會對整個事情失去焦點，並「重新開始」。反過來也是如此。我希望用戶能夠在兩者之間來回切換，而不會失去焦點。這可能嗎？

我認爲，這個問題我在本節的某處有謊言：

$(".whileloopflagvalue").live("click", function(event) { 
    $(this).hide();    
    $(this).parent().find('.whileloopflagselect').show();    
    $(this).parent().find('.whileloopflaginput').show();   
}); 


$(".whileloopflagselect, .whileloopflaginput").live("focusout", function(event) 
{ 
    $(this).parent().find('.whileloopflagselect').hide();    
    $(this).parent().find('.whileloopflaginput').hide(); 
    var temp=$(this).parent().find('.whileloopflaginput').attr("value"); 
    if (temp.length==0) { temp=1; } 
    $(this).parent().find('.whileloopflagvalue').html(temp); 
    $(this).parent().find('.whileloopflagvalue').show();  
}); 

Answer 1

這是我曾嘗試在一段時間才能找出最酷的事情之一。

我先更改了您的代碼，因爲它已折舊，因此不再使用live。

我在文件就緒功能中將所有事件處理程序添加到document;必要時委派。

然後我不得不創建一個標誌來告訴輸入是否髒。如果是，並且新聚焦的元素不是選擇，反之亦然，那麼我允許它設置值並隱藏字段。

here is what I came up with：

$(document).ready(function() { 
    var oldValue = $('whileloopflagvalue'); 

    $(document).find('.whileloopflagselect').hide(); 
    $(document).find('.whileloopflaginput').hide();  

    $(document).on('focusin',function(event){ 
     var theTarget = $(event.target); 
     var theInput = theTarget.parent().find('.whileloopflaginput'); 
     var theSelect = theTarget.parent().find('.whileloopflagselect'); 

     if(theInput.length > 0){ 
      if(theTarget[0] == theInput[0] || theTarget[0] == theSelect[0]){ 
       theInput.removeAttr('data-dirty'); 
      } 
     } 

    }); 

    $(document).on("focusout", function (event) { 
     var theTarget = $(event.target); 
     var theInput = theTarget.parent().find('.whileloopflaginput'); 
     var theSelect = theTarget.parent().find('.whileloopflagselect'); 
     setTimeout(function(){ 
      if (theTarget[0] == theInput[0] || theTarget[0] == theSelect[0]) { 
       if(theInput.attr('data-dirty') == 'dirty'){ 
        theTarget.parent().find('.whileloopflagvalue').text(theInput.val()); 
        theInput.hide(); 
        theSelect.hide(); 
        theTarget.parent().find('.whileloopflagvalue').show(); 
        theInput.removeAttr('dirty'); 
       } 
      } 
     }, 50); 
    }); 

    $(document).on("click",".whileloopflagvalue", function (event) { 
     oldValue = $(this).text(); 
     $(this).hide(); 
     $(this).parent().find('.whileloopflagselect').show(); 
     $(this).parent().find('.whileloopflaginput').show().focus(); 
    }); 

    $(document).on('change','.whileloopflagselect', function() { 
     var temp = $(this).attr("id"); 
     $(this).parent().find(".whileloopflaginput").val($('#' + temp).find(":selected").text()); 
     $(this).parent().find(".whileloopflaginput").attr('data-dirty','dirty'); 
     $("#" + temp).val("").attr('selected', true); 
    }); 

    $(document).on('input propertychange','.whileloopflaginput',function(){ 
     $(this).attr('data-dirty','dirty'); 
    }); 

}); 

如果您在文本框中輸入一個值，或選擇在下拉列表中值下降，只要你選擇下一個元素是一個兩個，那麼你可以所以現在在他們之間移動儘可能多。

丟失焦點處理程序中setTimeout的原因是允許瀏覽器觸發focusin事件。如果你沒有這樣做，那麼在兩個控件中的一個失去焦點後，就無法知道哪個元素得到了焦點。

唯一古怪的是，如果你不做任何改變，那麼它就不會隱藏。如果你點擊div，你必須改變一些東西。