Funcion para inputs.

Citar

Escrito el 02 Abr 2011 03:18 pm

Buenas,
esta tarde desarrollando un código para mi nuevo blog, traté de hacerlo con javascript para ir tomando algo de práctica y la verdad es que me está funcionando muy bien, a si que lo cuelgo aquí por si os sirve de ayuda o le veis algún fallo.

La función básicamente es para que cuando pongamos un value, o sea, un predefinido en los input, este se borre automaticamente al pulsarlo, y al salir, si no se ha escrito algo diferente a ese predefinido, vuelva a ponerlo como estaba. Esta función sirve con cualquier input, siempre y cuando tenga una ID, y se llame correctamente a la función.

Código Javascript :

function inputtext(elemento,estado)
{
   if (estado=="entrada")
   {
      guardar=true;
      i=0;
      while (i<=contaele)
      {
         if (elemento==elementos[i])
         {
         guardar=false;
         i=contaele;
         }
         i++;
      }
      if (guardar==true)
      {
         elementos[i]=elemento;
         texto[elemento]=document.getElementById(elemento).value;
         contaele++;
      }
      if (document.getElementById(elemento).value==texto[elemento])
      document.getElementById(elemento).value="";   
   }
   else if (estado="salida")
   {
      if (document.getElementById(elemento).value=="")
      document.getElementById(elemento).value=texto[elemento];
      
   }
}

Y ya que estamos, una duda de novato, ¿se puede saber desde que elemento, o desde que evento se hace la llamada a una función JS?.

Saludos.

Por neisserian89

65 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 02 Abr 2011 03:30 pm

No sabía modificar el mensaje, a si que solo 3 cosas que ya me han comentado:
Sí, se que hay un plugin en JQuery para hacer esto, pero esta vez quería hacerlo por mi mismo por que cada día estoy mas torpe de fácil que nos lo pone nuestro amigo Jquery/Mootools etc..
Y sí, se que con HTML5 también se puede.

Y por último me han sugerido que comente un poco el código para hacerlo más entendible.

Código HTML :

<input name="nombre" id="nombre" type="text" value="Escribe aqui tu nombre" onclick="inputtext('nombre','entrada')" onblur="inputtext('nombre','salida')"/>

Código :

texto=new Array();
elementos=new Array();
contaele=0 //inicializo variable y arrays
function inputtext(elemento,estado)
{
   if (estado=="entrada") // Si el parámetro es de entrada..
   {
      guardar=true; //Pongo guardar a true / i a 0 para las siguientes comprobaciones
      i=0;
      while (i<=contaele) /* Para recorrer el array donde guardo los elementos desde los que se ha llamado a la funcion */
      {
         if (elemento==elementos[i]) //Si ya he llamado a la función desde el array
         {
         guardar=false; // Es que ya tengo el elemento en el array ergo no quiero guardarlo
         i=contaele; //salgo del bucle para evitar comprobaciones innecesarias
         }
         i++; //Incremento i para seguir la comprobacion
      }
      if (guardar==true) //No hay en el array elementos el elemento desde el que hice la llamada
      {
         elementos[i]=elemento; //guardo el elemento en el array
         texto[elemento]=document.getElementById(elemento).value; //guardo el texto en un array cuyo indice lo compone el nombre del elemento
         contaele++; //incremento el indice del array para que no me sobreescriba el mismo elemento a la siguiente llamada
      }
      if (document.getElementById(elemento).value==texto[elemento]) /* Si al clickar el valor que tiene el input es igual al que tenia la primera vez que llame a la funcion desde ese elemento, si no, dejo lo que está ahora mismo */
      document.getElementById(elemento).value="";   
   }
   else if (estado="salida")
   {
      if (document.getElementById(elemento).value=="") /*si lo dejé vacio, pongo el texto que le corresponde, guardado en el array */
      document.getElementById(elemento).value=texto[elemento];
      
   }
}

Por neisserian89

65 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 03 Abr 2011 08:24 pm

si quieres saber que elemento fue el que ejecutó la funcion javascript
prueba con: this

Por sebifrost

61 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 15 Abr 2011 09:10 am

kk literalmente... se pude simplificar en unas pocas lineas, incluso solamente con javascript... pero como veo que eres novato en el tema se vale

Yo soy novato pero en la comunidad

Por Emmanuel.JDz

1 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 15 Abr 2011 12:07 pm

Pues simplificalo, y comparte tus conocimientos, en vez de alardear de que los tienes.. por que no aportas gran cosa, sinceramente, ni kk literalmente.

Y si, soy novato con JS, lo uso para lo básico y lo que me va haciendo falta.

Por neisserian89

65 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 15 Abr 2011 03:23 pm

Mi pequeño aporte.
Veo que usas las cadena 'entrada' y 'salida' para determinar si el usuario hizo clic o cambió de foco a otro elemento. Esto es innecesario. Puedes pasar como parámetro el objeto event y con event.type puedes saber el evento que se disparó. Y además existe otro evento que el usuario puede provocar y que es similar a clic: focus. También deberías tenerlo en cuenta.

Un pequeño ejemplo que te servirá para entender lo que quiero decir:

Código HTML :

<script type="text/javascript">
function fnc(ev) {
   document.getElementById("debug").innerHTML = "El evento es: "+ev.type+" y se disparo en el elemento con id: "+ev.target.id;
}
</script>
<body>
<form>
   <input type="text" id="ejemplo" name="example" onClick="fnc(event);" onFocus="fnc(event);" onBlur="fnc(event)" />
   <input type="button" value="clic" />
</form>
<div id="debug"></div>
</body>

Ten en cuenta además que el evento click dispara a su vez el evento focus, así que para propósito de tu código, solamente basta seguir dos eventos, blur y focus.

Saludos.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 15 Abr 2011 10:14 pm

Gracias por los tips DriverOp, comentarios como los tuyos son los que necesito.

PD: Entre a tu web, fivemedia, y esta muy chula, pero no se si es que estoy medio borracho por las 5 cervecitas de la cena o tu flash va muy rapido, el caso es que me marea y no puedo leerlo.

Por neisserian89

65 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 17 Abr 2011 03:22 am

No me gusta hecharle leña al fuego, pero el comentario de Emanuel lo encuentro muy fuera de lugar.
En primer lugar si lo 'sabes todo', entonces yo que tu estaría programando y dandomelas de 'el más mejorsh' , como probablemente siempre lo haces, y no hechando a perder un lugar en el cual uno puede aprender.
Aqui se viene a aprender, no a mirar en menos a los demas.
Si bien se podria simplificar, porque no lo simplificas tu y aportas? en vez de estar tirando mier... gratuitamente?.
Creeme que conozco la clase de programadores como tu.
Los que se creen secos y que sienten que saben todo y no van a aprender nada más porque las demas personas son inferiores.
El unico consejo que te puedo dar es 'más humildad' y menos 'yo yo'

Por sebifrost

61 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 18 Abr 2011 05:32 pm

neisserian89 escribió:

PD: Entre a tu web, fivemedia, y esta muy chula, pero no se si es que estoy medio borracho por las 5 cervecitas de la cena o tu flash va muy rapido, el caso es que me marea y no puedo leerlo.

La culpa no es mía, sino del diseñador

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 13 May 2011 09:21 am

DriverOp escribió:

Mi pequeño aporte.
Veo que usas las cadena 'entrada' y 'salida' para determinar si el usuario hizo clic o cambió de foco a otro elemento. Esto es innecesario. Puedes pasar como parámetro el objeto event y con event.type puedes saber el evento que se disparó. Y además existe otro evento que el usuario puede provocar y que es similar a clic: focus. También deberías tenerlo en cuenta.

Un pequeño ejemplo que te servirá para entender lo que quiero decir:

Código HTML :

<script type="text/javascript">
function fnc(ev) {
   document.getElementById("debug").innerHTML = "El evento es: "+ev.type+" y se disparo en el elemento con id: "+ev.target.id;
}
</script>
<body>
<form>
   <input type="text" id="ejemplo" name="example" onClick="fnc(event);" onFocus="fnc(event);" onBlur="fnc(event)" />
   <input type="button" value="clic" />
</form>
<div id="debug"></div>
</body>

Ten en cuenta además que el evento click dispara a su vez el evento focus, así que para propósito de tu código, solamente basta seguir dos eventos, blur y focus.

Saludos.

No funciona bajo IE 8.0.6001.18702

Por neisserian89

65 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 13 May 2011 09:22 am

Y supongo que bajo los demás tampoco, al menos 6 y 7.

Saludos

Por neisserian89

65 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 13 May 2011 12:23 pm

Por cierto, mirando el código,
if (guardar==true) //No hay en el array elementos el elemento desde el que hice la llamada
{
elementos[i]=elemento; //guardo el elemento en el array
texto[elemento]=document.getElementById(elemento).value; //guardo el texto en un array cuyo indice lo compone el nombre del elemento
contaele++; //incremento el indice del array para que no me sobreescriba el mismo elemento a la siguiente llamada
}
if (document.getElementById(elemento).value==texto[elemento])

me comi un "else" antes del ultimo if.

La función la hice para montar un array con los id's y textos y no tener que acudir con JS a ver el valor del input cada vez, por ejemplo si cargamos páginas con ajax y tenemos varios inputs, nos es rentable.

Saludos

Por neisserian89

65 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 13 May 2011 12:32 pm

Olvidé al bastardo, sorry...

Código HTML :

<script type="text/javascript">
function fnc(evt) {
   var evt = evt.target ? evt : window.event;
   if (!evt.target) { evt.target = evt.srcElement; }
   document.getElementById("debug").innerHTML = "El evento es: "+evt.type+" y se disparo en el elemento con id: "+evt.target.id;
}
</script>
<body>
<form>
   <input type="text" id="ejemplo" name="example" onClick="fnc(event);" onFocus="fnc(event);" onBlur="fnc(event)" />
   <input type="button" value="clic" />
</form>
<div id="debug"></div>
</body>

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Funcion para inputs.

Escribe una respuesta rapida