Comunidad de diseño web y desarrollo en internet online

problemas con input

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 06 Jun 2014 10:15 am
hola amigos, soy nuevo por aqui...
tengo dos inputs, input1 e input2
lo que deseo es generar este comportamiento en input1:
"al cargar la web, los dos salen con un value="0"
si pico en input1 se deve vorrar este valor predeterminado y que me deje introducir mi valor, una vez echo esto, picare en input2 para introducir la nueva informacion...."
bien, esto lo consegi con placeholder, ahora viene lo que no consigo....
"una vez picado en input1 y vorrado el valor predeterminado, si por cualquier cosa picara en input2 (antes de meter nada en input1) que vuelva a tener input1 el valor de 0....
tambien me gustaria que si no se mete nada, el value cojiera el valor de placeholder
espero haberme explicado bien y espero me ayudeis
gracias

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 06 Jun 2014 03:32 pm
placeholder hace por si solo lo que que quieres...

Código HTML :

<input type="text" placeholder"0">
<input type="text" placeholder"0">


En caso de que quieras trabajar directamente sobre los valores, hay que detectar el momento en que toma "foco" y pierde "foco", comparando los valores de la caja.

Te dejo un ejemplo usando jQuery.

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 06 Jun 2014 04:08 pm
como decia en el post tengo puesto lo de placeholder, pero lo que no consegia era lo otro, yo de jquerry no tengo ni papa de idea, aunque tengo alguna cosilla en mi codigo metio.....
muchisimas gracias

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 06 Jun 2014 07:58 pm
hola, entonces, para trabajar con jquerry, sii mal no recuerdo necesito el modulo jquery.js, lo descarge, pero tambien vi otro que se llama jquery.maskedinput.js ¿esto para que serviria? ¿lo necesito?
gracias

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 06 Jun 2014 08:07 pm
no se que estoy haciendo mal, meti el modulo jquerry en la misma carpeta donde esta la web, este es el codigo que tengo de ejemplo, segun vi en el enlace que me dejastes:

<html>
<head>
<title>
</title>
<script>
$('input').focus(function(){
if($(this).val() == 0) $(this).val('');
}).blur(function(){
if($(this).val() == '') $(this).val(0);
});
</script>
</head>
<body>
<input type="text" value="0">
<input type="text" value="0">
</body>
</html>

no se que estare haciendo mal para que no funcione igual de bien
gracias

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 06 Jun 2014 08:48 pm
nuevo codigo, pense que faltava la llamada, tampoco me funciona ¿que hago? gracias

<html>
<head>
<title>
</title>
<script src="jquery.js" type="text/javascript"></script>
<script>
jQuery(function($){
$('input').focus(function(){
if($(this).val() == 0) $(this).val('');
}).blur(function(){
if($(this).val() == '') $(this).val(0);
});
</script>
</head>
<body>
<input type="text" value="0">
<input type="text" value="0">
</body>
</html>

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 07 Jun 2014 08:59 pm
Para inicializar hay que esperan a que los elementos ya estén cargados.

Código Javascript :

$(document).ready(function(){
//El código.....
});

Pon dentro de la función de ready el código del input.

De dónde bajaste el jquery.js??

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

safari
Citar            
MensajeEscrito el 07 Jun 2014 09:00 pm
Para inicializar hay que esperan a que los elementos ya estén cargados.

Código Javascript :

$(document).ready(function(){
//El código.....
});

Pon dentro de la función de ready el código del input.

De dónde bajaste el jquery.js??

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

safari
Citar            
MensajeEscrito el 07 Jun 2014 09:56 pm
el enlace de donde vaje los dos archivos que comentaba es:

http://digitalbush.com/projects/masked-input-plugin/

no se de donde estas escribiendo, yo estoy en españa, abri mi correo por casualidad y vi que tenia respuesta, mañana por la tarde pruebo esto que me comentas
gracias

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 07 Jun 2014 10:03 pm
Descargalo de la página de jquery

Saludos desde México

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

safari
Citar            
MensajeEscrito el 08 Jun 2014 05:23 pm
hola, estuve viendo el enlace de la pagina oficial, me descarge lo que hay en este enlace
Download the uncompressed, development jQuery 2.1.1

mucho codigo para copiar.... lo copie en el editor de texto con la extension .js

ahora mismo esta en la misma carpeta que la web

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 08 Jun 2014 05:30 pm
sigue sin funcionar, lo que sale son los dos inputs con dos ceros, y soy yo el que los tiene que borrar, no es como en el ejemplo, que al picar se borra, el jquery lo guarde con este nombre: jquery.js ¿podrías corregir entero el código para que actué como debe?
aquí te dejo lo que hice, gracias

<html>
<head>
<title>
</title>
<script src="jquery.js" type="text/javascript"></script>
<script>
jQuery(function($){

$(document).ready(function(){
input type="text" value="0"

});

$('input').focus(function(){
if($(this).val() == 0) $(this).val('');
}).blur(function(){
if($(this).val() == '') $(this).val(0);
});
</script>
</head>
<body>
<input type="text" value="0">
<input type="text" value="0">
</body>
</html>

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 09 Jun 2014 04:06 am

Código HTML :

<html>
<head>
<title>Input</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

   $('input').focus(function(){
      if($(this).val() == 0) $(this).val('');
   }).blur(function(){
      if($(this).val() == '') $(this).val(0);
   });

});
</script>
</head>
<body>
<input type="text" value="0">
<input type="text" value="0">
</body>
</html>

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 09 Jun 2014 03:39 pm
muchisimas gracias, si que funciona....
en esta parte:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
puedo hacer la llamada directamente al archivo en la carpeta de jquery ¿verdad?

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 09 Jun 2014 03:44 pm
Sí, sólo verifica con qué versión trabajar

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 09 Jun 2014 03:52 pm
si, ya lo probe y funciona, el cambio que le hice es
<script src="jquery.js"></script>
tengo la version 2.1.1 de jquery....

perdona mi atrevimiento, probe esto para hacer lo mismo con caracteres alfanumericos, el codigo que hice y funciona es:
<html>
<head>
<title>Input</title>
<script src="jquery.js"></script>

<script>
$(document).ready(function(){

$('input').focus(function(){
if($(this).val() =="hola") $(this).val('');
}).blur(function(){
if($(this).val() == '') $(this).val("hola");
});

});
</script>
</head>
<body>
<input type="text" value="hola">
<input type="text" value="hola">
</body>
</html>

basicamente cambie 0 por "hola" y me vino la duda que empiezo a intentar..... ¿como se aria con un texarea?
gracias

Por josemari75

6 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 09 Jun 2014 04:19 pm

Código HTML :

<textarea>hola</textarea>


Y crear la función para $('textarea')

Lee sobre selectores de CSS, se manejan igual con jquery

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Foros de discusión > CSS y HTML

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.