JQuery - выбор и ввод Box Combo

Question

Я пытаюсь сделать поле выбора combo и ввод текста. Вот как я хотел бы, чтобы он работал.

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.