Probablemente alguien que sepa [Javascript->@wiki] va a encontrar este post lo más mula que hay, pero para mí esto ha sido todo un descubrimiento: cómo limpiar el valor de un input en un formulario.
El problema
Esta dificultad surgió con el rediseño de yukei.net puesto que como podrán ver, en el formulario para enviar un comentario cada uno de los campos tiene un valor “por defecto” de acuerdo a cada input:
Así, en el input donde debe ir el nombre, indica Tu nombre, en el del correo electrónico, Tu dirección de e-mail, y en el de la URL al sitio web del… ¿comentador, comentarista?… digamos autor del comentario, dice Tu Sitio Web —en éste estaba el problema. Junto a estos textos, hay un ícono que —idealmente— refuerza la idea de qué va en cada campo.
¿Por qué usar un texto predeterminado?
La idea de poner estos textos nace de una indicación pro-[accesibilidad->accesibilidad web@wiki], ya que según uno de estas especificaciones (no recuerdo si la de la W3 o la [Section 508->@en.wiki]) indica que es recomendable esta práctica, puesto que hay agentes de usuario no acceden a los input a no ser que no tengan ya algún contenido —y si no mal recuerdo, la otra especificación recomendaba exactamente lo contrario.
En la versión más sencilla, esto se logra utilizando el atributo value:
<input type="text"
name="author" id="author"
value="Tu nombre" size="22" />Pero esto acarrea un problema de [usabilidad->@wiki], puesto que al seleccionar el input el usuario debe borrar manualmente el texto para poder ingresar el suyo, por lo que en ese caso echamos mano a un poco de javascript —un truco que aprendí en el formulario de búsqueda de bootlog:
<input type="text" name="author" id="author"
value="Tu nombre"
onfocus="if(this.value=='Tu nombre')this.value='';"
onblur="if(this.value=='')this.value='Tu nombre';" />Con ello, cuando el usuario selecciona el input y el valor del mismo es igual a Tu nombre, se “limpia” automáticamente; si selecciona otra cosa y ese input está vacío, vuelve a poner Tu nombre. Por supuesto, si el valor es distinto de Tu nombre no le hace nada, ya que suponemos que en ese caso el usuario ha escrito su nombre.
En el caso de un theme para WordPress el código es algo distinto, ya que podemos utilizar automáticamente el nombre del comentarista si ha hecho un comentario antes y se ha guardado la cookie con sus datos —aquí va el código que ocupo en este theme, incluyendo el soporte para localización:
<input type="text"
name="author" id="author"
value="<?php if ($comment_author == '') { ?><?php _e('Your Name', 'perestroika')?>"
onfocus="if(this.value=='<?php _e('Your Name', 'perestroika')?>')this.value='';"
onblur="if(this.value=='')this.value='<?php _e('Your Name', 'perestroika')?>';<?php } else echo $comment_author; ?>"
size="22" />¿Por qué limpiar un valor?
Como los dos primeros datos son requeridos, no había problema con los valores predeterminados: todo aquel que quería enviar un comentario debía cambiar sus valores; sin embargo, no todos los usuarios utilizan el input para la URL a un sitio web, por lo que en múltiples ocasiones recibía comentarios con enlaces a http://TuSitioWeb, es decir, hacia el valor predeterminado… que por supuesto, no lleva a ninguna parte porque no es una dirección válida.
Editar cada comentario, obviamente no era una opción, por lo que tenía que haber una forma fácil de hacerlo y de lograrlo… y aquí ocupamos el biensabido poder de javascript para manipular formularios.
La solución
Este arreglo viene dado por el uso del atributo onsubmit en el formulario de comentarios: con él, podemos ejecutar una función de javascript al enviar el contenido del mismo. Además, tuve que agregar el atributo name al formulario para invocarlo fácilmente en el javascript:
<form name="commentform"
action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php"
method="post" id="commentform"
onsubmit="return checkurl();">Lo próximo es crear la función que revisará y limpiará el valor del formulario:
<script type="text/javascript">
function checkurl() {
if(document.commentform.url.value=='Tu Sitio Web')document.commentform.url.value='';
return true;
}
</script>document.commentform.url.value es lo que invoca el valor del input url en el formulario commentform, es decir, se construye de esta forma: document.nombre-del-formulario.nombre-del-input.value.
El if indica una simple prueba lógica: si el valor es igual a Tu Sitio Web, debe fijar el valor a '', o sea, vaciarlo.
Eso es todo… ahora, a ver si funciona.