我创建了一个小jQuery插件。目的是......
它主要起作用，但点击＆＃34;保存＆＃34;后，原始输入会被聚焦。我已经尝试过一切来模糊输入，但没有成功，并会感激任何建议。如何在保存对话框时模糊输入？
谢谢
<!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>
答案 0 :(得分：2)
您可以使用对话框的关闭事件来实现此目的。 http://api.jqueryui.com/dialog/#event-close
请参阅此处的修改。 http://jsbin.com/heyuvamoyo/1/
我做了$（＆＃39;输入＆＃39;）。blur（）;但您也可以传递输入的特定ID。