[Resolvido] Input dinâmico

[hunternh 2]

Como usar:

Parâmetros

 

parent - elemento que irá receber o input ex.: um form

id - id do elemento

name - nome do elemento

type - tipo de input ex.: text,hidden,password

label - gera automaticamente um label para o input, é necessário informar um id

src - se o tipo for image, informe o endereço da imagem

size - se o campo é do tipo texto ou file, informe o tamanho

maxlength - se o campo é do tipo texto, informe o comprimento máximo de caracteres

value - valor do elemento

classe - css do elemento

title - texto que aparece quando o mouse está sobre o elemento

checked - verdadeiro ou falso

disabled - verdadeiro ou falso

readOnly - verdadeiro ou falso

 

============================

 

Em funcionamento: http://hunternh.110mb.com/exemplos/input.html

 

 

input.js

/**************************************** inputTag v1.1					  ** Autor: Wagner B. Soares			****************************************/inputTag = function(p){	// recebe o objeto pai do input	if(!isString(p.parent)) return;	else p.parent = document.getElementById(p.parent);	// recebe o id do input	if(!isString(p.id)) p.id = "";	// recebe o nome do input	if(!isString(p.name)) p.name = "";	// recebe o texto para a label do input, necessário informar o id do input	if(!isString(p.label)) p.label = null;	// recebe o tipo do input	if(!isString(p.type) || (p.type != "text" && p.type != "password" &&							 p.type != "file" && p.type != "checkbox" &&							 p.type != "radio" && p.type != "image" && 							 p.type != "button" && p.type != "reset" && 							 p.type != "submit" && p.type != "hidden")){p.type = "text";}	// se for do tipo imagem recebe o endereço da imagem	if(!isString(p.src)) p.src = "";	// recebe o tamanho do input, válido para os tipos text, file e password	if(!isNumber(p.size)) p.size = "";	// recebe o tamanho máximo de caracteres do input, válido para os tipos text e password	if(!isNumber(p.maxlength)) p.maxlength = "500";	// recebe o valor do input	if(!isString(p.value)) p.value = "";	// recebe a classe css do input	if(!isString(p.classe)) p.classe = "";	// recebe o texto descritivo do input	if(!isString(p.title)) p.title = "";	// recebe o texto descritivo do input requerido	if(!isString(p.required)) p.required = "";	// recebe true ou false para configurar a propriedade checked,	// válido para os tipos radio e checkbox	if(!isBoolean(p.checked)) p.checked = false;	// recebe true ou false para configurar a propriedade disabled	if(!isBoolean(p.disabled)) p.disabled = false;	// recebe true ou false para configurar a propriedade readonly,	// válido para os tipos text, password e file	if(!isBoolean(p.readOnly)) p.readOnly = false;		var div = jQuery.create("div",{"class":"inputContainer"},[]);	jQuery(div).css({"display":"inline","width":"500px"});		var textRequired = null;	if(p.required.length > 0)	{		textRequired = jQuery.create("span",{"class":"mensagemErro","id":"mensagemErro-"+p.id},[p.required]);		jQuery(textRequired).css({"width":"200px"								 ,"color":"#FF0000"								 ,"background-color":"#FFFF99"								 ,"position":"absolute"								 ,"padding":"2px"								 ,"margin-top":"25px"								 ,"z-index":"5"								 ,"border":"2px solid"								 ,"display":"none"});	}		var input = null;	if(jQuery.browser.msie && p.type == "radio")		input = document.createElement("<input type='radio' name='"+p.name+"' />");	else		input = jQuery.create("input",{"type":p.type,"name":p.name},[]);		jQuery(input).attr({		id: p.id,		value: unescape(p.value),		title: p.title	});		jQuery(input).addClass(p.classe);		var label = null;		if(!isNull(p.label) && p.id != "") label = jQuery.create("label",{"for":p.id,"id":("label-"+p.id)},[p.label]);	// função para adicionar um evento ao input	this.setEvent = function(e,f)	{		if(isFunction(f)) jQuery(input).bind(e,f);	};	this.showRequired = function()	{		jQuery(textRequired).show();		window.setTimeout('jQuery("#mensagemErro-'+p.id+'").fadeOut()',7000);	}	// desenha o input na tela	this.draw = function()	{		if(p.type == "text" || p.type == "password"){jQuery(input).attr({size: p.size,maxlength: p.maxlength});}		if(p.type == "file"){jQuery(input).attr({size: p.size});}		if(p.type == "image"){jQuery(input).attr({src: p.src});}		if(!isNull(textRequired)) jQuery(div).append(textRequired);		if(!isNull(label) && p.type != "radio" && p.type != "checkbox") jQuery(p.parent).append(label);		jQuery(div).append(input);		jQuery(p.parent).append(div);		if(!isNull(label) && (p.type == "radio" || p.type == "checkbox")) jQuery(p.parent).append(label);		if(p.checked) input.checked = p.checked;		if(p.disabled) input.disabled = p.disabled;		if(p.readOnly) input.readOnly = p.readOnly;	};};

EDITADO

Fiz uma atualização no script e adicionei um item:

 

Mensagem de erro.

 

Esse é o modo de como utilizar que está no exemplo do link:

var senha = new inputTag({parent:"input",id:"senha",name:"senha",type:"password",label:"senha",required:"teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste"});senha.setEvent("blur",function(){senha.showRequired();});senha.draw();

para exibi-la utilize showRequired(), está mensagem desaparece automaticamente após 7 segundos.