El titulo parece confuso pero el tema es bastante sencillo, es acerca de cómo crear un campo de texto con un botón incluido para borrar el campo, como el que usan las aplicaciones nativas de iPhone o Google, te muestro una imagen para que se entienda mejor:

En este tutorial voy a explicar cómo conseguir el efecto en webkit, específicamente para iPhone/iPod Touch, aunque con algunos cambios se puede llevar a muchos otros navegadores.

Para empezar

Crear el campo es bastante sencillo, básicamente es el HTML de toda la vida, el efecto se logra con CSS y un poco de Javascript. Para hacerlo solo necesitas un editor de texto o HTML y un navegador que utilice webkit, de preferencia Safari.

El resultado final es un “campo de texto” como este

Escribo “campo de texto” entre comillas porque en realidad son tres elementos, una etiqueta (label), un campo de texto (input text) y un boton (input button).

Integrar los 3 elementos y conseguir un super campo de texto

HTML

Como ya lo dije mencione antes, el efecto esta en CSS, aunque vamos a empezar con el HTML:

<label for="txtNombre" class="ts-txtReset ts-label">Nombre:</label>
<input id="txtNombre" class="ts-txtReset ts-txt"type="text" />
<input id="btnNombre" class="ts-txtReset ts-btn" type="button" value="txtNombre" />

Si te puedes dar cuenta no hay nada extraordinario, quizás solo el nombre de las clases y el valor del botón que es el mismo que id del campo de texto, de momento no nos sirve y lo veremos más adelante, en el código javascript.

Las clases no tienen nada especial, excepto que todas comienzan con ts-, esto es porque el ejemplo es parte de un framework en el que estoy trabajando, Touchscript, y nada más que eso.

Estilo CSS

Ahora vamos con el estilo del campo de texto. La idea es engañar al ojo haciendolo creer que es un solo campo de texto, cuando en realidad son tres.

Etiqueta (ts-txtReset ts-label)

Cree el estilo la etiqueta con bordes redondeados, excepto del lado derecho que es donde se une con el campo de texto, también especifique el padding y el tamaño de letra, ambos para ajustarlo al campo de texto (con el padding por defecto no encajan y la fuente varia). Además cambie el color de la fuente a gris (#555) para resaltar la diferencia.

.ts-txtReset.ts-label{
 border:solid 1px #aaa;
 border-width:1px 0 1px 1px;
 padding:2px 0px 3px 4px;
 background:#fff;
 color:#555;
 margin:0;
 font-size:1em;
 /* WEBKIT */
 -webkit-appearance: none;
 -webkit-border-top-left-radius:4px;
 -webkit-border-bottom-left-radius:4px;
}

Campo de texto (ts-txtReset ts-txt)

Con el campo de texto es prácticamente lo mismo, añadir bordes excepto de los lados para ajustar a la etiqueta y el botón. Además añadí una regla exclusiva de webkit y que pudieron ver arriba, es -webkit-appearance: none;. Esta sirve para eliminar la sombra que Safari añade al campo de texto, de no quitar la sombra se perdería el efecto porque la etiqueta y el botón no tienen esa sombra y se nota “el salto”. También puedes ver que quite los bordes redondeados con -webkit-border-radius:0;

.ts-txtReset.ts-txt{
 border:solid 1px #aaa;
 border-width:1px 0 1px;
 padding:3px 2px 2px 0;
 font-size:1em;
 background:#fff;
 margin:0;
 /* WEBKIT */
 -webkit-appearance: none;
 -webkit-border-radius:0;
}

Botón (ts-txtReset ts-btn)

Casi para cerrar los estilos añade el del botón, de nuevo la misma que los anteriores pero con dos cambios notables. El primero es la imagen de fondo y el segundo es que no muestra texto (aunque si tiene value).

El fondo lo incluyo con background y con bastante padding lateral(10px) para hacer el botón más grande.

El texto se oculta con text-indent:-500em (lo envía muy lejos ) y por si acaso agrego overflow:hidden (para ocultar lo que este muy lejos).

.ts-txtReset.ts-btn{
 border:solid 1px #aaa;
 border-width:1px 1px 1px 0;
 padding:2px 7px 3px;
 font-size:1em;
 margin:0;
 background:#fff url(icono-reset.png) no-repeat center center;
 text-indent:-500em;
 overflow:hidden;
 /* WEBKIT */
 -webkit-appearance: none;
 -webkit-border-radius:0;
 -webkit-border-top-right-radius:4px;
 -webkit-border-bottom-right-radius:4px;
}

Termino el estilo agregando un estilo “base” al body:

body{font-family:helvetica, arial, sans-serif;}

Hasta aquí conseguiste el efecto visual del cuadro de texto, ahora hay que agregar la funcionalidad con javascript,

Hacer que el botón de borrar borre

La funcionalidad del botón de borrar igual es sencilla y se logra con javascript.

Lo primero es crear la función de borrar, o limpiar como le digo yo.

// TouchScript txtReset Limpia
function tsTxtResetLimpia(ev){
 txtVictima=document.getElementById(ev["target"].value);
 if(txtVictima){
  txtVictima.value="";
  txtVictima.focus();
 }
}

El parámetro ev es un objeto de evento, el “lanzador” del evento lo envía automáticamente, y de él lo único que importa es el campo target, que es lo mismo que el botón que disparo el evento (en nuestro ejemplo btnNombre). Del botón (target) tomamos el campo value que contiene el id del campo de texto que debe borrar (esa era la idea de usar el id del campo de texto en el value del botón). Luego compruebo si ese id existe, si existe borro el contenido y lanzo la función focus para el campo de texto.

La función de limpiar esta lista, ahora hay que asignársela al botón (btnNombre) usando addEventListener y el evento click.

// Inicializa las acciones al cargar la pagina
addEventListener('load',function(){
 // Asigna el evento click al boton btnNombre
 document.getElementById('btnNombre').addEventListener('click',tsTxtResetLimpia,false);
},false);

Safari en PC muestra una diferencia en el padding respecto a la de Safari mobile (iPhone/iPod) y para que se vea bien en ambos agregue un “mini hack”.

//Mini hack para corregir padding superior en Safari para PC
if(navigator.platform!="iPhone"&&navigator.platform!="iPod"){
 document.write('<style>.ts-txtReset.ts-label{padding-top:3px;}</style>');
}

Listo, con eso tienes un campo de texto con etiqueta y botón de borrar integrados. El código completo del ejemplo lo puedes ver en txtreset.txt, te recomiendo revisarlo para no olvidar cosas como la etiqueta meta viewport.

Notas

• El ejemplo es una muestra de lo simple que es mejorar un control para formulario y mejorar la usabilidad de una página web.
• Por la misma razón que solo es un ejemplo, aún se puede mejorar en muchos sentidos. Especialmente hacerlo con código no intrusivo, para no interferir si javascript esta desactivado, y poderlo hacer compatible con más navegadores además de Safari, o webkit en general.
• Más adelante incluiré este campo de texto en Touchscript para que sea más fácil usarlo.

Material

• Ejemplo: http://webdebolsillo.com/sandbox/touchscript/txtreset/
• Archivos del ejemplo: txtreset.zip (18.9kb)
  • index.html
  • icono-reset.png
  • icono-reset.psd
  • txtreset.txt (código fuente, lo mismo que index.html)