Problema con eventos en la creación de inputs dinámicos

freesoftwarrior · #1 (**permalink**) 09/02/2013, 13:13

Buenas tardes:
Tengo este código que me permite adicionar campos input de manera dinámica

Cita:

Y para llamar esta función hago esto

Cita:

Sin embargo, las que están en negrita no funcionan. El código de esas 3 funciones es el siguiente

Cita:

Estas 3 funciones funcionan muy bien cuando se trata de inputs clásico como este

Cita:

Lo que necesito es poder crear varios de estos inputs de manera dinámica y a requerimiento del usuario.

¿Alguien sabe por que con los eventos onfocus, onblur y onkeypress no se ejecutan las funciones?

Un saludo desde Lima, Perú

emprear · #2 (**permalink**) 09/02/2013, 14:21

El problema basicamente es que ese this.id que pasás en las funciones no existe, poruqe se refiere al id del elemento (input) creado

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
 var icremento =0;
 function crear(obj)
 {
 icremento++;
 
field = document.getElementById('field'); 
contenedor = document.createElement('div'); 
contenedor.id = 'div'+icremento; 
field.appendChild(contenedor); 
 
boton = document.createElement('input'); 
boton.type = 'text'; 
boton.name = 'text'+'[]'; 
boton.style.border = "1px solid white";
 boton.style.background = "#4F6497";
 boton.style.color = "white";
 boton.style.font = "x-small Arial";
 boton.id = "xxxxxxx_" + icremento;
boton.onfocus = function () {estilo(this.id,'focus')};
boton.onblur = function () {estilo(this.id,'blur')};
//boton.onchange = function () {estilo(this.id,'change')};
boton.onkeypress = function () {estilo(this.id,'keypress')};
 contenedor.appendChild(boton); 
 
}
 
function estilo(a,b){
document.getElementById('evento').innerHTML = a + '-' + b;
}
//]]>
</script>
</head>
<body>
<fieldset id="field" style="overflow: auto; height:70px; border:0px;"></fieldset>
 
<input type="button" value="Crear caja de texto" onclick="crear(this)" class="botones"><br />
<div id="evento">
</div>
</body>
</html>

fijate que previo a agregar los eventos definí
boton.id = "xxxxxxx_" + icremento;
el evento onchange, se va a sobreescribir con blur y focus asi no se si se justifica, menos si hay un keypress, pero bueno, ese es otro tema, ahora por lo menos los eventos deberían funcionarte

SAludos

freesoftwarrior · #3 (**permalink**) 09/02/2013, 14:37

Muchas gracias por la respuesta.
Ingresé esta línea

Cita:

boton.name = 'text'+'[]';
boton.id = 'text'+'[]';

para que tanto name y id tengan el mismo nombre, y con eso logré hacer funcionar el evento onkeypress que era el más importante porque es el que me permite filtrar el ingreso sólo de números y 1 punto decimal.

No te he comprendido eso de

boton.id = "xxxxxxxx_" + incremento;

¿Podrías explicarme un poco más?

Muchas gracias por tu apoyo

Un saludo desde Lima, Perú

emprear · #4 (**permalink**) 09/02/2013, 15:30

los nombres de id de un elemento DEBEN ser únicos y no comenzar por un número, por lo tanto cambaindo el incremento no lo serían en caso de crear multiples inputs, cosa que por otra parte sería lo más logico si estas defineindo el name como un array name[].
en tu caso tambien hacer name="text[]" id="text[] tambien es un error, porque el id no puede contener [].

Saludos

freesoftwarrior · #5 (**permalink**) 10/02/2013, 12:07

Sorry la demora en responder.
Modifiqué el código de esta forma

Cita:

boton = document.createElement('input');
boton.type = 'text';
boton.name = 'text'+icremento;
boton.id = 'text'+icremento;
boton.size = 10;
boton.style.border = "1px solid white";
boton.style.background = "#4F6497";
boton.style.color = "white";
boton.style.font = "x-small Arial";
boton.onfocus = function () {estilo(this.id,1)}
boton.onblur = function () {estilo(this.id,2)}
boton.onchange = function () {formato(this.value,'dec',this.id)}
boton.onkeypress = function () {return acceptNum2(event,this.id)}
contenedor.appendChild(boton);

sin embargo las funciones invocadas en los eventos onfocus y onblur no funcionan, las demás si.
No son funciones importantes pero me gustaría que funcionaran.

¿Alguna sugerencia?

Muchas gracias por tu apoyo
Un saludo desde Lima, Perú

emprear · #6 (**permalink**) 10/02/2013, 14:23

Si que funcionan, basta con que pruebes mi ejemplo, por supuesto que si ponés los 4 eventos juntos, el onchange no lo vas a ver, descomentá el onchange y comenta el onblur

SAludos

freesoftwarrior · #7 (**permalink**) 13/02/2013, 18:43

Me disculpo por la demora en responder, pero tuve algunos problemas familiares.
El código final es este:

Cita:

icremento =0;
function crear(obj)
{
icremento++;

field = document.getElementById('field');
contenedor = document.createElement('div');
contenedor.id = 'div'+icremento;
field.appendChild(contenedor);

boton = document.createElement('input');
boton.type = 'text';
boton.name = 'peso'+icremento;
boton.id = 'peso'+icremento;
boton.size = 10;
boton.style.border = "1px solid white";
boton.style.background = "#4F6497";
boton.style.color = "white";
boton.style.font = "x-small Arial";
boton.onfocus = function () {estilo(this.id,1)}
boton.onblur = function () {estilo(this.id,2)}
boton.onchange = function () {formato(this.value,'dec',this.id)}
boton.onkeypress = function () {return acceptNum2(event,this.id)}
contenedor.appendChild(boton);
}

Lamentablemente las funciones para los eventos onfocus y onblur siguen sin funcionar, más el resto de funciones si funcionan perfectamente bien. Creo que tiro la toalla jejejeje

emprear · #8 (**permalink**) 13/02/2013, 19:06

Cita:

Iniciado por freesoftwarrior

Me disculpo por la demora en responder, pero tuve algunos problemas familiares.
El código final es este:

Lamentablemente las funciones para los eventos onfocus y onblur siguen sin funcionar, más el resto de funciones si funcionan perfectamente bien. Creo que tiro la toalla jejejeje

Están funcionando perfectamente, el que debería de tirar la toalla soy yo
Saludos

freesoftwarrior · #9 (**permalink**) 13/02/2013, 20:45

Y te creo, pero sigo sin hacer que funcione. La función estilo es esta

Cita:

function estilo(campo,n)
{
if(n==1)
{document.getElementById(campo).className="texto_n ormal_focus";}
else
{document.getElementById(campo).className="texto_n ormal";}
}

y el código CSS es

Cita:

input.texto_normal{
border:1px solid White;
background: #4F6497;
font: x-small Arial;
color: White;
}

input.texto_normal_focus{
border:1px solid Yellow;
background: #374A77;
font: x-small Arial;
color: White;
}

Acabo de probar poner esto en el evento onfocus

Cita:

boton.onfocus = function () {alert("hoy")}

y veo que se ejecuta.... entonces ¿por que no invoca a la función misma? Es más, cree una función para eso

Cita:

boton.onfocus = function () {alerta(this.id,1)}

y la función alerta es

Cita:

function alerta(campo, tipo)
{alert(campo+" = "+tipo);}

y si funciona..... me parece que bajo esta modalidad, el invocar

Cita:

document.getElementById(campo).className="texto_normal_focus";

¿podría ser el problema? Porque el pasar el parámetro this.id no es el problema ya que eso mismo hago en las otras funciones.

¿que opinas ahora?... en verdad muchas gracias por tu apoyo, se que pronto podré solucionar el misterio de mi "gremlin"

emprear · #10 (**permalink**) 13/02/2013, 21:17

no, mirá
http://foros.emprear.com/javascript/objdin.html

y fijate que en mi ejemplo de
http://www.forosdelweb.com/f13/probl...5/#post4366618

justamente para cada evento te puse el nombre para que lo pase a la caja de texto, estilo(a,b)

Y te repito, si mezclas los 4 eventos juntos (keyup, keypress, onchange, etc) se van a sobreponer las acciones

SAludos