Mensaje para un input type="text"

koolj · #1 (**permalink**) 10/02/2012, 14:33

Hola amigos...
No sabia que poner de título :)

La cosa es asi
Estoy haciendo un formulario y quiero que al estar en una caja de texto aparezca un mensaje que ayude o que especifique que escribir en la caja de texto.
Ya casi lo tengo pero el mensaje sale donde no quiero y no se como hacerlo salir al lado de la caja de texto y que no se muevan las otras cosas.

Les pongo el código para que lo vean y me puedan ayudar.

Estos son los estilos

Código:

<style>
.Div1 {	
	width:183px;
	height:51px;
	background-color:#000;
	border-radius:8px;
	display:none;
	color:#FFF;
	position:absolute;
}
.Div2 {	
	width:183px;
	height:51px;
	background-color:#000;
	border-radius:8px;
	display:none;
	color:#FFF;
	position:absolute;
}
.Div3 {	
	width:183px;
	height:51px;
	background-color:#000;
	border-radius:8px;
	display:none;
	color:#FFF;
	position:absolute;
}
</style>

Este es el JavaScript el archivo jquery.js lo pueden llamar de otro lado

Código:

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
 $(document).ready(function(){
	 $("#txtNombre").focus(function (){		 
		 $('.Div1').fadeIn();
	 })
	 $("#txtNombre").blur(function (){		 
		 $('.Div1').fadeOut();
	 })
	 $("#txtTelefono").focus(function (){		 
		 $('.Div2').fadeIn();
	 })
	 $("#txtTelefono").blur(function (){		 
		 $('.Div2').fadeOut();
	 })
	 $("#txtEmail").focus(function (){		 
		 $('.Div3').fadeIn();
	 })
	 $("#txtEmail").blur(function (){		 
		 $('.Div3').fadeOut();
	 })
 })
</script>

Este es el formulario

Código:

<form id="form1" name="form1" method="post" action="">
<table width="30%" align="center">
  <tr>
    <td>Nombre:</td>
    <td>
      <input type="text" name="txtNombre" id="txtNombre" /><div class="Div1">Ingres su nombre</div></td>
  </tr>
  <tr>
    <td>Telefono:</td>
    <td>
      <input type="text" name="txtTelefono" id="txtTelefono" /><div class="Div2">Ingres su telefono</div></td>
  </tr>
  <tr>
    <td>Email:</td>
    <td>
      <input type="text" name="txtEmail" id="txtEmail" /><div class="Div3">Ingres su Email</div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="button" id="button" value="Enviar" /></td>
  </tr>
</table>
</form>

Espero que me ayuden

uikekarallo · #2 (**permalink**) 10/02/2012, 17:56

Hola, lo ideal sería utilizar capas y las que contengan los divs de los mensajes ponerles una clase y todas estas position: relative. Luego en el css utilizas top,right,bottom,left según convenga, y así siempre se posicionarán en el sitio perfecto que tú les digas.

Aquí tienes el ejemplo:

Código HTML:

Ver original<style>
.Div1 { 
    width:183px;
    height:51px;
    background-color:#000;
    border-radius:8px;
    display:none;
    color:#FFF;
    position:absolute;
}
.Div2 { 
    width:183px;
    height:51px;
    background-color:#000;
    border-radius:8px;
    display:none;
    color:#FFF;
    position:absolute;
}
.Div3 { 
    width:183px;
    height:51px;
    background-color:#000;
    border-radius:8px;
    display:none;
    color:#FFF;
    position:absolute;
}
 
.Div1, .Div2, .Div3 { top: 0;   right: 30px; }
.relat { position: relative;}
 
</style>
 
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
 $(document).ready(function(){
     $("#txtNombre").focus(function (){      
         $('.Div1').fadeIn();
     })
     $("#txtNombre").blur(function (){       
         $('.Div1').fadeOut();
     })
     $("#txtTelefono").focus(function (){        
         $('.Div2').fadeIn();
     })
     $("#txtTelefono").blur(function (){         
         $('.Div2').fadeOut();
     })
     $("#txtEmail").focus(function (){       
         $('.Div3').fadeIn();
     })
     $("#txtEmail").blur(function (){        
         $('.Div3').fadeOut();
     })
 })
</script>
</head>
<body>
 
<form id="form1" name="form1" method="post" action="">
<table width="30%" align="center">
  <tr>
    <td>Nombre:</td>
    <td>
      <div class="relat"><input type="text" name="txtNombre" id="txtNombre" /><div class="Div1">Ingres su nombre</div></div></td>
  </tr>
  <tr>
    <td>Telefono:</td>
    <td>
      <div class="relat"><input type="text" name="txtTelefono" id="txtTelefono" /><div class="Div2">Ingres su telefono</div></div></td>
  </tr>
  <tr>
    <td>Email:</td>
    <td>
      <div class="relat"><input type="text" name="txtEmail" id="txtEmail" /><div class="Div3">Ingres su Email</div></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="button" id="button" value="Enviar" /></td>
  </tr>
</table>
</form>
</body>

Un saludo.

koolj · #3 (**permalink**) 11/02/2012, 08:14

Ok muchas gracias!!!

muy buena tu idea