WaterMark con JQuery
Hasta la fecha, para hacer las marcas de agua en mis textbox siempre he usado el control TextBoxWaterMark del ASP.Net Ajax Control Toolkit. El problema, o lo que yo considero un coñazo es tener que estar declarando para cada TextBox un TextBoxWaterMark que apunte al primero y asignar valores a cada propiedad. Esto por cada TextBox de la página. Realmente un esfuerzo innecesario.
Por esto me he decido escribir código JQuery para evitarlo y simplificar mi trabajo.
Para ello necesitamos un CSS que se aplique a la marca de agua y la llamada correspondiente al código JQuery. Tan sencillo como esto.
Como siempre, las partes.
CSS
.WaterMark {
color: #999;
background-color:#E2EAF4;
font-style: italic;
}
A continuación el código JQuery.
$(document).ready(function() {
// APLICA WATERMARK SI EL TEXTBOX NO TIENE VALOR
jQuery("input").each(function() {
if ($(this).val() == $(this).attr('title'))
$(this).val('').addClass('WaterMarkOn');
else
if ($.trim($(this).val()) == '')
$(this).addClass('WaterMarkOn').val($(this).attr('title'));
});
// AL OBTENER EL FOCO LIMPIA TITLE Y QUITA CLASE DE MARCA
jQuery("input").focus(function() {
if ($(this).hasClass("WaterMarkOn"))
$(this).removeClass('WaterMarkOn').val('');
});
// AL PERDER FOCO SI EL INPUT ESTÁ VACIO VUELVE A PONER MARCA
jQuery("input").blur(function() {
if ($(this).val() == '')
$(this).addClass('WaterMarkOn').val($(this).attr('title'));
});
});
Y el código aspx.
<head runat="server">
<title>TextBoxWaterMark</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/Default.js" type="text/javascript"></script>
<script src="Scripts/jquery.watermark.js" type="text/javascript"></script>
<link href="css/WaterMark.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<label>Campo 1:</label>
<asp:TextBox ID="TextBox1" ToolTip="Introducir Campo 1" runat="server"></asp:TextBox>
<br /><br />
<label>Campo 2:</label>
<asp:TextBox ID="TextBox2" ToolTip="Introducir Campo 2" runat="server"></asp:TextBox>
<br /><br />
<label>Campo 3:</label>
<asp:TextBox ID="TextBox3" ToolTip="Introducir Campo 3" runat="server"></asp:TextBox>
</div>
</form>
</body>
Aunque en los comentarios se explica, esto es lo que hace el código JQuery.
Primero, el mensaje a mostrar como marca de agua lo obtendrá de la propiedad Tooltip si es un TextBox de ASP o de la propiedad title si es un input html. Realmente la propiedad Tooltip de ASP se renderiza como un title, así que en el JQuery trabajaremos con title. Se le asignará el valor de dicha propiedad siempre que el TextBox no tenga datos, si tiene no se aplica la marca de agua.
Segundo. Al obtener el foco el TextBox se le quita la marca de agua y se limpia su contenido.
Tercero. Al perder el foco, si no se ha escrito nada en el TextBox se le vuelve a aplicar la marca de agua.
Por supuesto, cambiando el css podremos adecuar la marca de agua a nuestro propio estilo..
Esto es todo, con una simple llamada en nuestro código tendremos el mismo WaterMark del ControlToolkit, con una sola llamada. Sobre todo cómodo.
Aquí puedes ver el ejemplo.
Aquí bajar el fuente.