Para que un campo de texto sea accesible debe cumplir:
– Debe tener un valor por defecto
– Debe estar correctamente etiquetado (mediante una etiqueta <label for=”nombre_del_campo_de_texto”>)
El valor por defecto lo podemos fijar estáticamente, estableciendo el valor de la propiedad Text del campo de texto. En este ejemplo el valor se va a fijar a la cadena de texto ‘Texto…’ y se van a añadir dos códigos javascript para que cuando el usuario haga clic o sitúe el foco en el campo de texto, dicho campo se vacíe y cuando salga, si no ha escrito nada, se vuelva a establecer con el valor ‘Texto…’
El código HTML debe quedar de la siguiente forma:
<label id="labelTxtEjemplo" for="txtEjemplo">
<input name="txtEjemplo" type="text" value="Texto..." id="txtEjemplo" onfocus="if(this.value=='Texto...')this.value='';" onblur="if(this.value=='')this.value='Texto...';" />
</label>En este fragmento de código HTML podemos ver cómo la propiedad for de la etiqueta label tiene por valor el identificador del campo de texto: txtEjemplo
Veámos el código asp.net necesario:
<label runat="server" id="labelTxtEjemplo">
<asp:TextBox ID="txtEjemplo" runat="server" Text="Texto..."></asp:TextBox>
</label>En éste código podemos ver que la etiqueta label tiene su propiedad runat establecida al valor server. El motivo es porque dinámicamente (desde el código C#) vamos a añadirle la propiedad for, y tendrá como valor el identificador que le haya correspondido al campo de texto. Para ello implementaremos el evento Page_Load de la siguiente forma:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
labelTxtEjemplo.Attributes.Add("for", txtEjemplo.ClientID);
//El código de las siguientes dos requerirán tener activado JavaScript en nuestro navegador
txtEjemplo.Attributes.Add("onfocus", "if(this.value=='Texto...')this.value='';");
txtEjemplo.Attributes.Add("onblur", "if(this.value=='')this.value='Texto...';");
}
}En el fragmento de código anterior cabe destacar las dos líneas que añadirán código JavaScript. Dicho código debe ser independiente del dispositivo, es decir, que los eventos programados deben funcionar independientemente del dispositivo que genere el evento. En este caso, los eventos funcionarán tanto con el ratón (haciendo clic dentro de la caja de texto) como si accedemos a la caja de texto con el tabulador del teclado.
El funcionamiento de éste código es el que empleo en la caja de texto de búsqueda de www.webprogramacion.com
