widget de javascript para limpiar campo de formulario tipo texto
Estaba haciendo un formulario para búsqueda según criterios y se me presentó la necesidad de limpiar campos específicos porque en la lógica de programación del servidor hace la consulta usando ILIKE en su respectivo campos en base de datos y el campo del formulario es diferente a “” (previo trim (para adelantarme a los purista… en realidad es una expresión regular lo que uso, no una función built in)), entonces cuando uno hace varias búsquedas es un fastidio borrar todos los campos o la mayoría de ellos, no me pareció colocar un botón de reset para limpiar todos los campos porque no siempre se quiere eso, así que hice un pequeño script que con solo agregarle una clase al campo que queremos que tenga el efecto, este recibe el comportamiento.
1 <html>
2 <head>
3 <script type=“text/javascript” src=“jquery.js” > </script>
4
5 <style>
6 input { border:1px solid black; }
7 input.dvst { padding : 2px ; padding-right : 20px ; }
8 </style>
9
10 <script type=“text/javascript”>
11
12 jQuery(function(){
13 jQuery(“input[@type=text].dvst”).each(function(){
14 jQuery(this).after(“<span> <img id=’limpiarDVST_” + jQuery(this).attr(“id”) + “‘ src=’close.gif’ title=’Limpiar campo’ style=’position:relative; top: 1px ; left: -22px ; cursor: pointer; z-index : 1′> </span>”);
15
16 verificaEstadoInput(jQuery(this));
17 });
18
19 jQuery(“input[@type=text].dvst”).bind(“keyup”,function(){
20 verificaEstadoInput(jQuery(this));
21 });
22
23 function verificaEstadoInput(jqueryObj){
24 if (jqueryObj.val() != “”){
25 jQuery(“#limpiarDVST_”+jqueryObj.attr(“id”)).show();
26 }else{
27 jQuery(“#limpiarDVST_”+jqueryObj.attr(“id”)).hide();
28 }
29 }
30
31 jQuery(“*[@id^=limpiarDVST_]“).bind(“click”,function(){
32 jQuery(“#”+jQuery(this).attr(“id”).substr(12)).val(“”);
33 jQuery(this).hide();
34 });
35 });
36
37 </script>
38
39 </head>
40 <body>
41
42<label for=“codigo”>Codigo:</label> <input id=“codigo” type=“text” class=“dvst” value=“uno” > 43 <label for=“nombre”>Nombre:</label> <input id=“nombre” type=“text” class=“dvst” value=“cuatro” > <br /><br />
44
45
46<label for=“descripcion”>Descripcion:</label> <input id=“descripcion” type=“text” class=“dvst” >
47
48 </body>
49 </html>
Sé que se puede hacer de una mejor forma, como por ejemplo usando el plugin dimension de jquery para calcular la posición del campo y luego posicionar la cruz en un z-index superior con un top y left especificos, así cuando aparece desaparece la cruz no se desplazan los elementos, pero como está ahora funciona bien. saludos
Hola! quería hacer un comentario aparte, podes bajarle a la tonalidad del resaltador de sintaxis! cuesta leerlo!
saludos!