使用 jquery 将用户的焦点重新集中在一系列表单输入中的输入位置

Question

我一直在这个网站以及其他一些网站上搜索这个问题的答案，虽然我想出了一些东西，但我还没有找到任何完全符合我的要求的东西。

我正在开发一种用于筹款服务的表格，人们可以在其中为石材摊铺机雕刻一条信息。由于这是一所大学，他们希望能够在表格中使用希腊字母。我想出了一种方法来做到这一点，即捕获用户键入某个键（@）并打开一个对话框，要求他们选择希腊字母或取消。当他们这样做时，它会将 @ 替换为他们选择的希腊字母（如果他们刚刚关闭或取消对话框，则替换为“”）。

然而，我遇到的最大问题之一是，在此之后，焦点就会丢失，用户会感到困惑。我想将焦点返回到对话框打开之前的确切位置。这可能吗？

这是我正在使用的JS：

//giving form engraving greek letter replacement code
    var $greekLetters = $('<div class="greekModal"><ul><li><a href="#" class="close alpha"><img src="../../images/giving/alpha.gif" alt="Alpha" title="Alpha" /></a></li><li><a href="#" class="close beta"><img src="../../images/giving/beta.gif" alt="Beta" title="Beta" /></a></li><li><a href="#" class="close gamma"><img src="../../images/giving/gamma.gif" alt="Gamma" title="Gamma" /></a></li><li><a href="#" class="close delta"><img src="../../images/giving/delta.gif" alt="Delta" title="Delta" /></a></li><li><a href="#" class="close epsilon"><img src="../../images/giving/epsilon.gif" alt="Epsilon" title="Epsilon" /></a></li><li><a href="#" class="close zeta"><img src="../../images/giving/zeta.gif" alt="Zeta" title="Zeta" /></a></li><li><a href="#" class="close eta"><img src="../../images/giving/eta.gif" alt="Eta" title="Eta" /></a></li><li><a href="#" class="close theta"><img src="../../images/giving/theta.gif" alt="Theta" title="Theta" /></a></li><li><a href="#" class="close iota"><img src="../../images/giving/iota.gif" alt="Iota" title="Iota" /></a></li><li><a href="#" class="close kappa"><img src="../../images/giving/kappa.gif" alt="Kappa" title="Kappa" /></a></li><li><a href="#" class="close lambda"><img src="../../images/giving/lambda.gif" alt="Lambda" title="Lambda" /></a></li><li><a href="#" class="close mu"><img src="../../images/giving/mu.gif" alt="Mu" title="Mu" /></a></li><li><a href="#" class="close nu"><img src="../../images/giving/nu.gif" alt="Nu" title="Nu" /></a></li><li><a href="#" class="close xi"><img src="../../images/giving/xi.gif" alt="Xi" title="Xi" /></a></li><li><a href="#" class="close omicron"><img src="../../images/giving/omicron.gif" alt="Omicron" title="Omicron" /></a></li><li><a href="#" class="close pi"><img src="../../images/giving/pi.gif" alt="Pi" title="Pi" /></a></li><li><a href="#" class="close rho"><img src="../../images/giving/rho.gif" alt="Rho" title="Rho" /></a></li><li><a href="#" class="close sigma"><img src="../../images/giving/sigma.gif" alt="Sigma" title="Sigma" /></a></li><li><a href="#" class="close tau"><img src="../../images/giving/tau.gif" alt="Tau" title="Tau" /></a></li><li><a href="#" class="close upsilon"><img src="../../images/giving/upsilon.gif" alt="Upsilon" title="Upsilon" /></a></li><li><a href="#" class="close phi"><img src="../../images/giving/phi.gif" alt="Phi" title="Phi" /></a></li><li><a href="#" class="close chi"><img src="../../images/giving/chi.gif" alt="Chi" title="Chi" /></a></li><li><a href="#" class="close psi"><img src="../../images/giving/psi.gif" alt="Psi" title="Psi" /></a></li><li><a href="#" class="close omega"><img src="../../images/giving/omega.gif" alt="Omega" title="Omega" /></a></li></ul></div>')
    .dialog({   
        autoOpen: false,
        title: 'Select Greek Letter',
        modal: true,
        showCloseLabel: false,
        close: function(event, ui) { 
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"");
                    $( ".greekModal" ).dialog( "close" ); 
                    });
        },
        buttons: {
            Cancel: function() {

                    $( this ).dialog( "close" );

            } 
        }
        });

$(".greekModal a.alpha").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Α");
                });
                return false;
});

$(".greekModal a.beta").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Β");
                });
                return false;
});

$(".greekModal a.gamma").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Γ");
                });
                return false;
});

$(".greekModal a.delta").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Δ");
                });
                return false;
});

$(".greekModal a.epsilon").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Ε");
                });
                return false;
});

$(".greekModal a.zeta").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Ζ");
                });
                return false;
});

$(".greekModal a.eta").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Η");
                });
                return false;
});

$(".greekModal a.theta").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Θ");
                });
                return false;
});

$(".greekModal a.iota").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Ι");
                });
                return false;
});

$(".greekModal a.kappa").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Κ");
                });
                return false;
});

$(".greekModal a.lambda").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Λ");
                });
                return false;
});

$(".greekModal a.mu").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Μ");
                });
                return false;
});

$(".greekModal a.nu").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Ν");
                });
                return false;
});

$(".greekModal a.xi").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Ξ");
                });
                return false;
});

$(".greekModal a.omicron").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Ο");
                });
                return false;
});

$(".greekModal a.pi").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Π");
                });
                return false;
});

$(".greekModal a.rho").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Ρ");
                });
                return false;
});

$(".greekModal a.sigma").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Σ");
                });
                return false;
});

$(".greekModal a.tau").click(function() {
                $("input.engraving").val(function(i, val) {
                    return val.replace(/@/,"Τ");
                });
                return false;
    });

    $(".greekModal a.upsilon").click(function() {
                    $("input.engraving").val(function(i, val) {
                        return val.replace(/@/,"Υ");
                    });
                    return false;
    });

    $(".greekModal a.phi").click(function() {
                    $("input.engraving").val(function(i, val) {
                        return val.replace(/@/,"Φ");
                    });
                    return false;
    });

    $(".greekModal a.chi").click(function() {
                    $("input.engraving").val(function(i, val) {
                        return val.replace(/@/,"Χ");
                    });
                    return false;
    });

    $(".greekModal a.psi").click(function() {
                    $("input.engraving").val(function(i, val) {
                        return val.replace(/@/,"Ψ");
                    });
                    return false;
    });

    $(".greekModal a.omega").click(function() {
                    $("input.engraving").val(function(i, val) {
                        return val.replace(/@/,"Ω");
                    });
                    return false;
    });

    $(".greekModal a.close").click(function() {
                    $( ".greekModal" ).dialog( "close" );
                    return false;
    });

    if ($.browser.mozilla) { 
        $("input.engraving").keypress(function(event) {
            if(event.charCode == "64")
            {
                $greekLetters.dialog('open');
            }
        });
    } else {
        $("input.engraving").keypress(function(event) {
            if(event.keyCode == "64")
        {
                $greekLetters.dialog('open');
            }
        });
    }
});

相关的html是：

<li><label class="desc" for="engraving_first_line">First Line: </label>
                        <input class="engraving" type="text" name="engraving_first_line" id="engraving_first_line" size="15" maxlength="15" /> (Maximum characters: 15)</li>
                    <li><label class="desc" for="engraving_second_line">Second Line: </label>
                        <input class="engraving" type="text" name="engraving_second_line" id="engraving_second_line" size="15" maxlength="15" /> (Maximum characters: 15)</li>
                    <li><label class="desc" for="engraving_third_line">Third Line: </label>
                        <input class="engraving" type="text" name="engraving_third_line" id="engraving_third_line" size="15" maxlength="15" /> (Maximum characters: 15)</li>
                    <li><label class="desc" for="engraving_fourth_line">Fourth Line: </label>
                        <input class="engraving" type="text" name="engraving_fourth_line" id="engraving_fourth_line" size="15" maxlength="15" /> (Maximum characters: 15)</li>

Answer 1

这应该有效：

$('input').keydown(function(){
    $input = $(this); // Do this
    $('#greek').dialog({   
        close: function(event, ui) { 
            $input.val(function(i, val) { // And this
                $(this).focus(); // And this
                return val.replace(/@/,"");
                $('#greek').dialog('close'); 
            });
        }
    });
});

演示： http://jsfiddle.net/AlienWebguy/PsqpV/

Answer 2

您可以将输入元素传递给对话框，并在关闭对话框时调用该元素的 .focus() 。

你可以做这样的事情

$("input.engraving").keypress(function(event) {
            if(event.charCode == "64")
            {
                $greekLetters.data('clickedInput', this).dialog('open');
            }
});

：

.dialog({   
        autoOpen: false,
        title: 'Select Greek Letter',
        modal: true,
        showCloseLabel: false,
        close: function(event, ui) { 
                $("input.engraving").val(function(i, val) {
                    $(this).data('clickedInput').focus();
                    return val.replace(/@/,"");                        
        },
        buttons: {
            Cancel: function() {
                    $(this).data('clickedInput').focus();
                    $( this ).dialog( "close" );

            } 
        }
    });

    Cancel: function() {
                $(this).data('clickedInput').focus();
                $( this ).dialog( "close" );

    }