Gerenciador de tags em campos de formulários
January 2nd, 2007. Published under DOM, javascript, web 2.0. No Comments.
Desenvolvi uma solução em JavaScript que gerencia as tags em um campo de formulário de acordo com as configurações informadas pelo utilizador dessa solução.
Com o advento da web 2.0 tornou-se muito comum categorizar artigos, por exemplo, através de tags (rótulos). Cada aplicativo que utiliza esse tipo de categorização separa as tags através de espaços, outros com vírgulas (minha preferência), entre outros separadores. Alguns limitam a quantidade de tags durante o ato de categorizar, outros não.
A solução abaixo foi desenvolvida com base nessas divergências e por isso permite ser customizada de acordo com a característica da aplicação em que esta solução for utilizada.
/**
* w3_manager_tags (0.1) - 02/01/2007
* Leandro Vieira Pinho
* Localize-me. Blog: [ http://leandro.w3invent.com.br ], E-mail leandro[at]w3invent[dot]com[dot]br
*/
var w3_manager_tags = {
// Configuração
objFieldId: 'id_do_campo', // ID do campo onde as tags serão digitadas
strSpliter: ',', // Separador desejado para as tags. Ex. , (vírgula) | (espaço) | ; (ponto e vírgula)
intTotalTagsMax: 5, // Total máximo de tags permitido
boolShowAlert: true, // Exibir ou não um alerta, caso exceda o total de tags
strMessage: 'Utilize no máximo 5 (cinco) tags.', // Mensagem a ser exibida
start: function() {
var objField = this.$(this.objFieldId);
objField.onkeyup = function() {
w3_manager_tags.manager(this.value);
};
},
manager: function(strTagsParam) {
var arrTags = strTagsParam.split(this.strSpliter);
var intTotalTags = arrTags.length;
if ( intTotalTags > this.intTotalTagsMax ) {
var strTagsInValue = "";
for ( var i = 0; i < this.intTotalTagsMax; i++ ) {
strTagsInValue = strTagsInValue + arrTags[i] + this.strSpliter;
}
this.$(this.objFieldId).value = strTagsInValue.substring(0,(strTagsInValue.length - 1));
if ( this.boolShowAlert ) {
alert(this.strMessage);
}
}
},
$: function(strObjId) {
return document.getElementById(strObjId);
}
};
O script está auto-explicativo, bem como os itens a serem configurados. Se tiver alguma dúvida ou sugestão, comente.