Использование jquery для переориентации пользователя, где он печатал, в серии форм ввода - PullRequest
Новая
       35

Использование jquery для переориентации пользователя, где он печатал, в серии форм ввода

0 голосов
/ 14 октября 2011

Я искал на этом веб-сайте, а также нескольких других людей, чтобы найти ответ на этот вопрос, и хотя я нашел несколько вещей, я не нашел ничего, что бы полностью соответствовало моим требованиям.

Я разрабатываю форму для использования со службой по сбору средств, в которой люди могут выгравировать сообщение для каменных брусчатки.Так как это для университета, они хотят иметь возможность использовать греческие буквы в формах.Я нашел способ сделать это, ловя, когда пользователь вводит определенный ключ (@), и открывая диалоговое окно с просьбой выбрать греческую букву или отменить.Когда они это делают, он заменяет @ греческой буквой, которую они выбрали (или "", если они просто закрыли или отменили диалог).

Однако одна из самых больших проблем, с которыми я столкнулся, заключается в том, что послеВ этот момент фокус теряется, а пользователь в замешательстве.Я хочу вернуть фокус в то место, которое было до открытия диалогового окна.Это возможно?

Вот 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>

Ответы [ 2 ]

0 голосов
/ 15 октября 2011

Это должно работать: 

$('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/

0 голосов
/ 14 октября 2011

Вы можете передать элемент ввода в диалоговое окно и после закрытия диалогового окна вызвать .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" );

    }
...