使用 jQuery 对话框时防止焦点集中在输入上

Question

我创建了一个 jQuery 小插件。目的是..

常规 jQueryUI 自动完成
如果随后单击 "Create New Account"，将生成一个对话框。
用户在字段中输入内容并单击 "save" 并填充了几个输入。

大部分情况下它都能正常工作，但在单击 "save" 后，原始输入将被聚焦。我已经尝试了所有模糊输入的方法，但没有成功，并希望得到任何建议。如何在保存对话框时模糊输入？

谢谢

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                $("#account_name").addAccount({source:[{"id":1,"value":"aaa1"},{"id":2,"value":"aaa2"},{"id":3,"value":"aaa3"},{"id":4,"value":"aaa4"}]});
            });

            (function($){
                //Add an account (used by com_contacts edit and bid lists)

                var defaults = {
                    dialogID    :'dialog-addAccount',  //Dialog to display
                    populateID  :'accounts_id',   //id to populate select account
                    handler     :function(callback,form) {callback(form);},
                    post        :'post.php',  //
                    source      :'source.php',  //
                    rules       :{},  //
                    messages    :{}  //
                };

                function mkList(list)
                //Creates list from array.  If not an array, just uses the one value
                {
                    if (list instanceof Array) {
                        var string='';
                        for(var i in list){string+='<li>'+list[i]+'</li>';}
                    } else {
                        var string=list;
                    }
                    return string;
                }

                var methods = {
                    init : function (options) {

                        var settings = $.extend({}, defaults, options);
                        var selectedInput=this;
                        var $dialog=$('#'+settings.dialogID);

                        console.log('test','#'+settings.dialogID,$dialog,$dialog.find('form'));

                        var validator=$dialog.find('form').validate({
                            rules: settings.rules,
                            messages: settings.messages,
                            submitHandler: settings.handler.bind(null, function(form) {
                                var data=$(form).find(':input').serializeArray();
                                //$.post(settings.post,data, function (json) {
                                //Returns account id (id) and errors[]
                                var json={id:123,errors:[]};    //testing only
                                if(json.errors.length==0) {
                                    $('#'+settings.populateID).val(json.id);
                                    console.log('post',selectedInput,form.name.value)
                                    settings.oldname=form.name.value;
                                    selectedInput.val(form.name.value);//.blur();
                                }
                                else{$("#dialog-error").data('error','Error adding account<ul>'+mkList(json.errors)+'</ul>').dialog("open");}
                                $("#dialog-addAccount").dialog("close");
                                //},'json');
                            })
                        });
                        console.log($dialog.find('form'),validator)

                        $dialog.dialog({
                            autoOpen    : false,
                            resizable   : false,
                            height      : 300,
                            width       : 664, 
                            modal       : true,
                            open        : function() {
                                validator.resetForm();
                                $(this).find('input:not([type=hidden],:checkbox),select').val('');
                            },
                            buttons     : [
                                {
                                    text    : 'SAVE',
                                    'class'  : 'green wide',
                                    click    : function() {
                                        $dialog.find('form').submit();
                                    }
                                },
                                {
                                    text    : 'CANCEL',
                                    'class'  : 'gray',
                                    click    : function() {$(this).dialog('close');}
                                }
                            ]    
                        });
                        $(this).focus(function(e) {
                            settings.oldname=this.value;
                            this.value='';
                            console.log(e,'focus')
                        }).blur(function(e) {
                            this.value=settings.oldname;
                            console.log(e,'blur')
                        }).autocomplete({
                            source: settings.source,
                            minLength: 2,
                            select: function(event, ui){
                                $('#accounts_id').val(ui.item.id);
                                settings.oldname=ui.item.value ;
                            },
                            response: function( event, ui ) {
                                ui.content.push({value:"Create new account", id:0, label:"Create new account"});
                            },
                            /*
                            change: function( event, ui ) {
                            console.log('change',event,ui,this)
                            $(this).blur();
                            },
                            */
                            open: function( event, ui ) {
                                $('ul.searchAccountList li:last').css('color','blue').click(function(){
                                    $dialog.dialog("open");
                                    return false;
                                });
                            }
                        }).autocomplete( "widget" ).addClass("searchAccountList");

                        //return this.each(function () {});
                    },
                    destroy : function () {
                        //Anything else I should do here?
                        delete settings;
                        return this.each(function () {});
                    }
                };

                $.fn.addAccount = function(method) {
                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if (typeof method === 'object' || ! method) {
                        return methods.init.apply(this, arguments);
                    } else {
                        $.error('Method ' +  method + ' does not exist on jQuery.addAccount');
                    }    
                };

                }(jQuery)
            );
        </script>
    </head>

    <body>
        <input type="text" id="account_name" />
        <input type="text" id="accounts_id" />

        <div id="dialog-addAccount">
            <form>
                <input type="text" value="" name="name" />
            </form>
        </div>

    </body> 
</html>

Answer 1

您可以使用对话框的关闭事件来实现此目的。 http://api.jqueryui.com/dialog/#event-close

在此处查看编辑。 http://jsbin.com/heyuvamoyo/1/

我做了$('input').blur();但您也可以传递输入的特定 ID。

使用 jQuery 对话框时防止焦点集中在输入上

Preventing focus on input when using jQuery Dialog

javascript

jquery

jquery-ui

jquery-ui-dialog