input con un botón type reset

[Zptweb]

Hola, quería hacer que cuando un usuario escribiese algo en un input search, si ha escrito 1 caracter, apareciese un botón con la opción de limpiar el input, con lo que ha escrito, así, tipo Apple, que solo sale la x cuando se ha escrito algo.

Porque yo se que haciendo un button type reset, se limpia el input, pero no se como hacer para que solo salga cuando el usuario ha escrito algo, no para que salga siempre, aunque el usuario no haya escrito nada.

Saludos.

[Ronruby]

Para eso tienes que usar un lenguaje de parte del cliente, como Javascript.

[GatorV]

Tema trasladado a Javascript.

[JavierB]

Hola Zptweb

Prueba esto:

Código javascript:

<input type="text" onkeyup = "borrar.disabled = this.value==''" />
<input type="reset" name="borrar" disabled="disabled" />
 

Saludos,

[Zptweb]

Me ha servido, se queda el botón con transparencia, pero, como puedo convertir ese input reset para que se vea una imagen?

[buzu]

jeje, me gusta la forma en que has hecho la comparación javier. zptweb para usar una imagen quizá puedas usar CSS. O usa una imagen y le das al evento onclick una función que es la que limpiaría el formulario.

[Zptweb]

Oks, lo he hecho mediante javascritp, el problema es, que, al estar asginado un value="" predeterminado, entonces cuando borra, bien, borra lo que he escrito, pero se vuelve a poner el valor donde estaba antes, que para el script funcione, se supone que debe ser value="", pero si yo lo quiero poner value="Search...", entonces, cuando borra algo, borra, pero vuelve a quedar el value predeterminado (Search...)

Este es el código:

<input type="text" value="Search..." onfocus="if (this.value == 'Search...') this.value = ''" onblur="if (this.value == '') this.value = 'Search...'" name="q" id="s"/>


<script type="text/javascript">
$.extend({
searchbox: function() {
var isSafari = /Apple/.test(navigator.vendor);
var isOpera = window.opera;
var input = $("form.searchbox input:text");

$("form.searchbox input:reset").each(function(x, el){
$(el).addClass("resetButton");
$(el).bind("click", function(){
$(this).removeClass("delete");
});
});

input.bind("keyup", function(){
if($(this).val() != '') $(this).parent().find("input:reset").addClass("del ete");
else $(this).parent().find("input:reset").removeClass(" delete");
});
}

});
$(document).ready(function(){
$.searchbox();
})
</script>
<input type="reset" name="" value="" />


Saludos.