1

我正在尝试做一个组合选择框和文本输入。这是我希望它工作的方式。

  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();    
});
4

1 回答 1

1

这是我一段时间以来试图弄清楚的最酷的事情之一。

我首先将您的代码更改为不再使用live，因为它已被贬值。

我将所有事件处理程序添加到document文档就绪函数中；必要时委托。

然后我必须创建一个标志来判断输入是否脏。如果是并且新聚焦的元素不是 select，反之亦然，那么我允许它设置值并隐藏字段。

这是我想出的：

$(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，则必须更改某些内容。

于 2013-03-19T18:01:37.977 回答