Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: anarubia en 20 de Septiembre 2015, 15:31
-
Buenas tardes. ¿como sería este código en jquery , para dar onfocus y onblur al elemento input (nombre, email)?, gracias
<form action="registro.php" method="get" name="miFormulario" id="miFormulario"
enctype="multipart/form-data">
<input type="text" name="usuario" id="usuario" value="Escribe tu Nombre" tabindex=1
onfocus="if (this.value == 'Escribe tu Nombre') {
this.value = ''; this.style.background = 'transparent'; }"
onblur="if (this.value == '') {
this.value = 'Escribe tu Nombre';
this.style.background = 'url(imagenes/online-red-icon.png)no-repeat'; }">
<input type="text" name="email" id="email tabindex=2"
value="Escribe tu email"
onfocus="if (this.value == 'Escribe tu email') {
this.value = ''; this.style.background = 'transparent'; }"
onblur="if (this.value == '') {
this.value = 'Escribe tu email';
this.style.background = 'url(imagenes/descarga.png)no-repeat'; }">
</form>
-
Hola Ana, a ver si alguien se anima y te hace la traducción, mientras tanto recomendable consultar tutoriales jQuery como http://www.tutorialspoint.com/jquery/ ó http://www.w3schools.com/jquery/ u otros
Salu2
-
lo he intentado , pero no me sale, ¿ donde está el error? este es el código que he puesto
<script>
$(document).ready(function(){
$("usuario").focus ( function (){
$ ( this ). val ( '' );
$(this).css("background", "url(imagenes/online-red-icon.png)no-repeat");
}). blur ( function (){
$(this).val('Nombre');
$(this).css("background","url(imagenes/senal.png)no-repeat");
$(this).css("background-color", "gray"):
})
</script>
::)
-
Hola Ana fíjate en este ejemplo donde se usa focus (en este caso para mostrar un mensaje con efecto de desvanecimiento cuando se hace click sobre una casilla de formulario)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$("span").css({"display": "inline", "color": "red"}).fadeOut(2000);
});
});
</script>
<style>
span { display: none; }
</style>
</head>
<body>
<input>
<span>No olvides rellenar todos los campos</span>
<p>Hacer click en la casilla de datos</p>
</body>
</html>
-
Gracias saludos