Plugin jQuery para formularios HTML (aporte)

#1 (**permalink**) 15/03/2012, 22:59

Buscando por ahí hace un par de días alguna función que hiciera lo que necesitaba para una web, terminé por crear un pequeño (muy pequeño) plugin que hace exactamente lo que le pido.

Mi intención es la ya extendida de borrar el contenido del campo de un formulario al hacerle click (cuando el valor del campo está prefijado), volver a insertar su contenido original si nos salimos del mismo estando vacío, y que lo mismo se aplique para los campos "textarea" con texto prefijado.

A fin de cuentas, modestamente he creado esto.

Les dejo el link:

http://www.mediafire.com/download.php?4g41bcumb3jwr1g

Breve explicación.

Es un plugin en jQuery, por lo que obviamente deben invocar tanto la librería jQuery como el plugin en sí (sé que es muy obvio esto pero yo también fui novato

)

Una vez que tienen entre sus etiquetas head la llamada al script, llaman a la función de la siguiente manera:

Código:

$(document).ready(function(){
$('form').clearFields();
});

Donde 'form' sea el formulario en cuestión.

Les dejo un código completo de ejemplo.

Código HTML:

<html>
<head>
    <title>Título</title>
    
    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="ruta_del_archivo/clearFields.js"></script>
    
    <script>
        
        $(document).ready(function(){
            
            $('form.miFormulario').clearFields();
            
            });
        
    </script>
</head>
<body>
    
    <form class="miFormulario">
        
        <input type="text" value="Valor por defecto"> <br>
        <input type="text" value="Valor por defecto"> <br>
        <input type="text" value="Valor por defecto"> <br>
        <input type="text" value="Valor por defecto"> <br>
        <textarea>Texto por defecto</textarea>
            
    </form>
</body>
</html>

Y una página de ejemplo con el plugin en funcionamiento.

http://nicholaslebec.webege.com/form_clearFields.html

Pruébenlo y me comentan :)

Es súper sencillo, pero a veces sirve no tener que hacerlo a mano uno mismo :P

Lo hice detallado para los que no entiendan mucho del asunto, siempre alguien lo necesita!!

Críticas, preguntas, consejos y agradecimientos son bienvenidos!

Enjoy

Tschüss!!

Naahuel · #2 (**permalink**) 16/03/2012, 07:10

Está muy bien, me gusta.

Me parece bien que has aclarado que el texto es el valor por defecto del campo, y no la etiqueta de lo que éste representa.

Es decir que si no completamos algunos de esos campos, el formulario enviará ese valor como dato. Eso es importante aclarar para que no se maluse este script pretendiendo emular una especie de placeholder para los inputs.

Uno de los primeros plugins que hice servía para esto último:
http://nahueljose.com.ar/ejemplos/et...inline-labels/

Lo hice porque necesitaba incluir un formulario en un lugar donde tenía muy poco espacio. El HTML es válido, son <label>'s para <input>'s.

Si reviso ahora el código seguramente enconraré 1000 formas de hacerlo mejor, recién había comenzado :P

#3 (**permalink**) 16/03/2012, 07:59

Gracias por tu comentario sobre el valor por defecto, lo has explicado mejor.

Y sí, era la intención.

Saludos!