使用 jquery 重新关注用户在一系列表单输入中输入的位置答案

【问题标题】：Using jquery to refocus a user where they were typing within a series of form inputs使用 jquery 重新关注用户在一系列表单输入中输入的位置
【发布时间】：2011-10-14 19:44:40
【问题描述】：

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

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

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

这是我正在使用的 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>

【问题讨论】：

代码将帮助我们找出问题所在...
为什么不存储他们在打开对话框之前的最后输入ID？
然后再次聚焦到那个ID，使用间距将光标放回原来的位置？这是我正在研究的想法之一，但我不确定如何。
至于一些代码，我知道我可以将它简化为一个定义好的函数，我只是专注于让它先工作，然后再回去清理。

标签： jquery input dialog focus

【解决方案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/

【讨论】：

太棒了！我会试试看！谢谢！

【解决方案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" );

    }

【讨论】：

嗯，这是可能的。我必须弄清楚如何使用它，但谢谢。
我相信 event.target 会暗示对话节点，而不是输入节点。