1
Я создал небольшой плагин jQuery. Цель состоит в том, чтобы ..Предотвращение фокуса ввода при использовании jQuery Dialog
- Общие положения а jQueryUI автозаполнения
- Если «Создать новую учетную запись», затем щелкнул, диалоговое окно генерируется.
- Пользователь вводит что-то в поле и нажимает «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>
Thanks Yalamber! Я рвал мои волосы, пытаясь заставить это работать. Позвольте мне проверить его немного, прежде чем выбрать ваш ответ. Еще раз спасибо. – user1032531
Работает отлично! Знаете ли вы, почему размывание его где-то, кроме события закрытия диалога, не привело к таким же результатам? – user1032531
Я предполагаю, что вы пытались размыть событие изменения в автозаполнении? Поэтому, когда вы нажимаете кнопку создания новой учетной записи, это значение текстового поля уже изменено и не сфокусировано. Я думаю, что jquery ui dialog, вероятно, пытается снова сосредоточиться на этом элементе по умолчанию. Не совсем понятно, почему нужно проверять исходный код. – Yalamber