fbpx

Funcionalidad Placeholder usando jQuery

December 10, 2010

Funcionalidad placeholder para formularios con JQuery.
Poner este code en la page, luego llamar a placeholder.init() en el document.ready.

Los inputs que quiero tengan placeholder hay que ponerle una clase con el nombre “placeholder” y en el title el texto del mismo.
Para los de tipo password hay que agregarle la clase “password”, y el input tiene que ser tipo text. Ej:

Code:


var placeholder = {
init: function(){
$(".placeholder").each(function() {
$(this).val($(this).attr('title'));
});
$(".placeholder").focus(function(){ placeholder.focus(this) });
$(".placeholder").blur(function(){ placeholder.blur(this) });
},
focus: function(input) {
input = $(input);

if(typeof input.data('placeholder') == "undefined") {

input.data('placeholder', input.attr('title'));

//Password type
if(input.hasClass('password')) {
//Input creation, copying some attributes from input text
var inputPass = $("<input>").attr({
type: 'password',
name: input.attr('name'),
'class': input.attr('class'),
id: input.attr('id'),
style: (input.attr('style') == undefined)? '': input.attr('style'),
maxlength: 15
});

inputPass.data('placeholder', input.attr('title'));
input.attr('name', '_' + $(input).attr('name'));
input.removeAttr('id');
input.after(inputPass);
inputPass.focus();

//Attaching events
inputPass.focus(function(){ placeholder.focus(this) });
inputPass.blur(function(){ placeholder.blur(this) });

//Hide input text
input.hide();
}
}

//For inputs type password, we show/hide inputs text <-> password
if(input.val() == input.data('placeholder') && input.hasClass('password')) {
input.hide();
input.next().show().focus();
}

//For inputs type text, we just clean the value
if(input.val() == input.data('placeholder') && !input.hasClass('password')) {
input.val('');
}
},

blur: function(input) {
input = $(input);

if(input.hasClass('password') && input.val() == '') {
//For inputs type password, we show/hide inputs text <-> password
input.hide();
input.prev().show();
} else if(input.val() == ''){
//For the rest of inputs, we just copy data value to input value
input.val(input.data('placeholder'));
}
}

};
avatar
Gonzalo Escribano

Ver entradas

Most Recent

June 9, 2022

¿Qué son las DAO y cuáles son sus beneficios?

Es común en la historia contemporánea que haya cambios a partir de los avances en el campo de la...

Read More

June 2, 2022

¿Qué son las DeFi y por qué son el futuro de las finanzas?

Es común en la historia contemporánea que haya cambios a partir de los avances en el campo de la...

Read More

May 27, 2022

How to start a successful product build from scratch?

Creating a product from scratch could be a huge challenge. To achieve your business goals it’s important to develop...

Read More