Написал плагинчик jQuery.dynput

такой элемент, который становится инпутом, если на него кликнуть.

боян небось, но я не нашел, когда надо было, и написал вот.


Код написан под меня, он юзает две функции - они есть на странице примера. Просто группирует цифры. Их можно вытереть из плагина. Мне лень.


Пример:
http://datai.ru/dynput.html

Вот код:
[js]$(document).ready(function() {
jQuery.fn.cuckoo = function (code) {
eval(code);
}

jQuery.fn.dynput = function (options) {
var options = jQuery.extend({
label: '...',
value: false,
input_width: 100,
label_max_length: 15,
label_class: '',
label_prefix: '',
label_suffix: ''
},options);
return this.each(function() {
var opt = options;
var name = $(this).attr('name');
$(this).wrap('<div class="dynputbox" id="dynputbox-'+name+'" />');
$(this).addClass('dynput_hidden');
$(this).removeClass('dynput');
$(this).hide();
if ($(this).val() == '') {
$(this).val(opt.value ? opt.value : '');
}
if ($(this).attr('label') == '' || (typeof $(this).attr('label') == 'undefined')) {
$(this).attr('label',opt.label);
} else {
opt.label = $(this).attr('label');
}
if ($(this).attr('label_prefix') == '' || (typeof $(this).attr('label_prefix') == 'undefined')) {
$(this).attr('label_prefix',opt.label_prefix);
} else {
opt.label_prefix = $(this).attr('label_prefix');
}
if ($(this).attr('label_suffix') == '' || (typeof $(this).attr('label_suffix') == 'undefined')) {
$(this).attr('label_suffix',opt.label_suffix);
} else {
opt.label_suffix = $(this).attr('label_suffix');
}
if ($(this).attr('label_max_length') == '' || (typeof $(this).attr('label_max_length') == 'undefined')) {
$(this).attr('label_max_length',opt.label_max_length);
} else {
opt.label_max_length = $(this).attr('label_max_length');
}
if ($(this).attr('input_width') == '' || (typeof $(this).attr('input_width') == 'undefined')) {
$(this).attr('input_width',opt.input_width);
} else {
opt.input_width = $(this).attr('input_width');
}
$(this).parent().css('display','inline').append('<div class="dynput_ui '+opt.label_class+'">'+$(this).attr('label_prefix')+($(this).val() == '' ? opt.label : $(this).val())+$(this).attr('label_suffix')+'</div>');
$(this).parent().css('cursor', 'pointer');
var dynput_ui = $(this).siblings('div.dynput_ui').first();
dynput_ui.css('display','inline');
$(this).parent().click(function(e){
e.stopPropagation();
var divui = $(this).children('div.dynput_ui').first();
divui.html('<input class="dynput_input">');
var input = $(this).children('div.dynput_ui').first().children('input.dynput_input').first();
input.css('margin', '-5px 0 -3px -2px');
input.css('width', divui.siblings('input.dynput_hidden').attr('input_width'));
input.css('font-size', '1em');
input.css('border', '1px solid white');
input.animate({borderColor:'#999999'}, { duration: 200, queue: false });
input.val(divui.siblings('input.dynput_hidden').val());
var tmp = input.val()
input.focus();
input.val('');
input.val(tmp)
input.click(function(e){
e.stopPropagation();
});
var cancel = false;
input.keypress(function(e) {
cancel = false;
if (e.keyCode == '27') {
cancel = true;
input = $(this).parent().siblings('input.dynput_hidden').first();
val = input.val().GroupDigits();
if (val == '') {
$(this).parent().text(input.attr('label_prefix')+$(this).parent().siblings('input.dynput_hidden').first().attr('label')+input.attr('label_suffix'));
} else {
if (val.length > input.attr('label_max_length')) {
$(this).parent().html(input.attr('label_prefix')+'<acronym title="'+val.replace(/\"/g,"'")+'">'+val.substr(0,input.attr('label_max_length'))+'...</acronym>'+input.attr('label_suffix'));
} else {
$(this).parent().text(input.attr('label_prefix')+val+input.attr('label_suffix'));
}
}
e.stopPropagation();
e.stopImmediatePropagation();
}
if (e.which == '13') {
input = $(this).parent().siblings('input.dynput_hidden');
e.preventDefault();
var val = $(this).val();
if (val !== $(this).parent().siblings('input.dynput_hidden').val()) {
//onchange:
input.val(val);
input.parent().attr('value', val);
$(this).parent().parent().cuckoo(input.attr('change'));
}
val = val.GroupDigits();
if (val == '') {
$(this).parent().siblings('input.dynput_hidden').val(null);
$(this).parent().text(input.attr('label_prefix')+$(this).parent().siblings('input.dynput_hidden').first().attr('label')+input.attr('label_suffix'));
} else {
if (val.length > input.attr('label_max_length')) {
$(this).parent().html(input.attr('label_prefix')+'<acronym title="'+val.replace(/\"/g,"'")+'">'+val.substr(0,input.attr('label_max_length'))+'...</acronym>'+input.attr('label_suffix'));
} else {
$(this).parent().text(input.attr('label_prefix')+val+input.attr('label_suffix'));
}
}
}
});
input.focusout(function(){
if (!cancel) {
input = $(this).parent().siblings('input.dynput_hidden');
var val = $(this).val();
if (val !== $(this).parent().siblings('input.dynput_hidden').val()) {
//onchange:
input.val(val);
input.parent().attr('value', val);
$(this).parent().parent().cuckoo(input.attr('change'));
}
val = val.GroupDigits();
if (val == '') {
$(this).parent().siblings('input.dynput_hidden').val(null);
$(this).parent().text(input.attr('label_prefix')+$(this).parent().siblings('input.dynput_hidden').first().attr('label')+input.attr('label_suffix'));
} else {
if (val.length > input.attr('label_max_length')) {
$(this).parent().html(input.attr('label_prefix')+'<acronym title="'+val.replace(/\"/g,"'")+'">'+val.substr(0,input.attr('label_max_length'))+'...</acronym>'+input.attr('label_suffix'));
} else {
$(this).parent().text(input.attr('label_prefix')+val+input.attr('label_suffix'));
}
}
}
});
});
});
};
});[/js]