Question

我正在尝试进行组合选择框和文本输入。以下是我希望它的工作方式。

用户看到旧值
点击旧值可提供组合文本框并选择下拉框
用户可以输入文字或选择一个选项
选择哪一项成为新值

我能够完成大部分工作，你可以在这里看到它。

然而，当有人专注于输入时，他们无法进入投放箱而不会失去对整个事物的关注并“重新开始”。反之亦然。我希望用户能够在两者之间来回切换而不会失去焦点。这可能吗？

我认为我遇到的问题在于本节的某个部分：

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

Jquery - 选择和输入框组合

1 个答案: