Método y/u objeto de origen

[venkman]

1. Antes de insertar el elemento dentro del documento, el elemento sí que existe, pero no está dentro del documento. (Suena lógico, no? :))

2. La diferencia está en que setAttribute hace algo muy concreto: Modificar un atributo de un elemento del DOM. Lo segundo simplemente modifica una propiedad del objeto.

3. ¿Con .focus()?

[Dude--]

1. Entiendo por lo tanto que da igual si lo pones antes o después del replace.

venkam:
2. La diferencia está en que setAttribute hace algo muy concreto: Modificar un atributo de un elemento del DOM. Lo segundo simplemente modifica una propiedad del objeto.

¿Entonces es igual de correcto usar cualquiera de ellos en este caso? no entiendo bien tu aclaración ¿qué diferencia hay entre modificar la propiedad de un objeto DOM y modificar la propiedad de un objeto si ambos son el mismo objeto? ¿no se supone que dom es una forma de acceder a los objetos del documento?

3. Con lo que sea, la cuestión es que con focus() en Internet Explorer no funciona y tal como puse en el enlace debería funcionar, no lo comprendo.

[venkman]

Lee bien. En un caso pone atributo y en otro propiedad.

[Dude--]

Iniciado por venkman

Lee bien. En un caso pone atributo y en otro propiedad.

Lo siento sigo sin entender la diferencia.

RAE
Atributo (Del lat. attribūtum):
Cada una de las cualidades o propiedades de un ser.

Propiedad (De propriedad):
Atributo o cualidad esencial de alguien o algo

[venkman]

En entornos técnicos las palabras tienden a tener significados más específicos que en el habla común (que es lo que recoge el diccionario). Los matices importan. Además, en un caso es un atributo del elemento y en otro una propiedad del objeto.

setAttribute modifica un atributo del elemento del DOM. Cuando hablamos de un atributo de un elmento del DOM hablamos de esto: <tag atributo="valor" atributo2="valor2"/>

En el otro caso, simplemente estás modificando una propiedad cualquiera de un objeto cualquiera. Un objeto que representa un elemento del DOM tiene, además de los atributos del elemento que representa, cualquier otra propiedad. Por ejemplo, tiene una propiedad children, pero no por eso existe un atributo <tag children="blabla">. O innerHTML, pero no por eso existe un atributo <tag innerHTML="blabla">

[Dude--]

Iniciado por venkman

En entornos técnicos las palabras tienden a tener significados más específicos que en el habla común (que es lo que recoge el diccionario). Los matices importan. Además, en un caso es un atributo del elemento y en otro una propiedad del objeto.

setAttribute modifica un atributo del elemento del DOM. Cuando hablamos de un atributo de un elmento del DOM hablamos de esto: <tag atributo="valor" atributo2="valor2"/>

En el otro caso, simplemente estás modificando una propiedad cualquiera de un objeto cualquiera. Un objeto que representa un elemento del DOM tiene, además de los atributos del elemento que representa, cualquier otra propiedad. Por ejemplo, tiene una propiedad children, pero no por eso existe un atributo <tag children="blabla">. O innerHTML, pero no por eso existe un atributo <tag innerHTML="blabla">

Gracias por la explicación, creo que ya lo comprendí. Por lo que en mi caso entiendo que sería más correcto utilizar setAttribute ya que estamos definiendo/"modelando" el contenido o tipo de los atributos de un elemento DOM.

¿Respecto al problema del focus() alguien tiene alguna idea?

[Dude--]

Lo único que se me ocurre es que haga falta un delay entre el replace del input y la asignación del foco... pero no estoy seguro y tampoco es que sepa como testear esta suposición. Desde luego se me esta atascando este problema.

Una manita porfavore xD

[venkman]

¿Te da algún error? ¿Qué es lo que ocurre, lo que se ve?

(Si quieres probar lo del retardo haz algo como setTimeout(function(){ tal.focus()}, 100); o con el tiempo que sea en milisegundos)

[Dude--]

Iniciado por venkman

¿Te da algún error? ¿Qué es lo que ocurre, lo que se ve?

(Si quieres probar lo del retardo haz algo como setTimeout(function(){ tal.focus()}, 100); o con el tiempo que sea en milisegundos)

No daba ningún error, simplemente cuando reemplazaba el input nuevo (nuevotextbox) por el viejo, este perdía el foco. Es lo que trataba de arreglar reasignándoselo.

Con setTimeout(function(){ nuevotextbox.focus()}, 100); ¡si que funciona! en todos los navegadores :D, ya era hora...

Había probado esta otra forma de añadir delay:

Código javascript:

setTimeout(nuevotextbox.focus(), 100);
 

pero no funcionaba ¿por qué? me gustaría entenderlo la verdad, a si lo mismo evito errores en el futuro.

Por cierto, el hecho de que haga falta un delay no podría causar problemas? quiero decir, ¿cómo se cual es el delay correcto? lo mismo en el ordenador de algún usuario 100 es insuficiente ¿no?

[venkman]

¿por qué?

Eso no funciona porque lo que le tienes que pasar a setTimeout es una función. Lo que tú estás poniendo ahí es una llamada, una instrucción.

Lo del delay... sí, claro que puede dar problemas. Claro que es difícil saber cuánto tiempo tienes que poner. En realidad yo te lo decía sólo por probar, no como una buena solución.

¿Tienes algún sitio donde se pueda ver el problema? ¿O quizá un ejemplo completo pero sólo con eso para que lo pueda probar?

[Dude--]

Código javascript:

<script type="text/javascript">
            function checkevent(e)
            {
                var obj=e.srcElement || e.target;
                var objeto = document.getElementById(obj.name);
                var evento = e.type;
                
                if ( obj.name == "email" )
                {
                    if(evento == "focus" && objeto.value == "tu email")
                    { objeto.value = ""; }
                    if(evento == "blur" && objeto.value == "" )
                    { objeto.value = "tu email"; }
                }
                
                if ( obj.name == "pass" )
                {
                    var formulario = document.getElementById("identificacion");
                    if(evento == "focus" && objeto.value == "tu contraseña")
                    { 
                        var nuevotextbox = document.createElement("input");
                        nuevotextbox.setAttribute("id", "pass");
                        nuevotextbox.setAttribute("name", "pass");
                        nuevotextbox.setAttribute("type", "password");
                        nuevotextbox.setAttribute("value", "");
                        nuevotextbox.setAttribute("onfocus", "checkevent(event)");
                        nuevotextbox.setAttribute("onblur", "checkevent(event)");
                        formulario.replaceChild(nuevotextbox, objeto);
                        setTimeout(function(){ nuevotextbox.focus()}, 100); 
                    }
                    if(evento == "blur" && objeto.value == "")
                    { 
                        var nuevotextbox = document.createElement("input");
                        nuevotextbox.setAttribute("id", "pass");
                        nuevotextbox.setAttribute("name", "pass");
                        nuevotextbox.setAttribute("type", "text");
                        nuevotextbox.setAttribute("value", "tu contraseña");
                        nuevotextbox.setAttribute("onfocus", "checkevent(event)");
                        nuevotextbox.setAttribute("onblur", "checkevent(event)");
                        formulario.replaceChild(nuevotextbox, objeto);
                    }
                }
        
            }
        </script>
 

Código html:

<form id="identificacion" action="index.php" method="post" enctype="application/x-www-form-urlencoded">
    <input id="email" type="text" name="email" title="Email de usuario" value="tu email" size="20" onfocus="checkevent(event)" onblur="checkevent(event)" />
    <input id="pass" type="text" name="pass" value="tu contraseña" size="10" onfocus="checkevent(event)" onblur="checkevent(event)" />
    <label><input  type="checkbox" name="autologin" />Guardar</label>
    <input type="submit" value="Ok" /> 
</form>
 

¿Existe alguna función ya definida en javascript del tipo waituntil....? es decir, una funcion que antes de intentar llevar el foco compruebe que el input ha sido creado. Así eliminariamos el problema derivado de usar setTimeout(), o quizás se puede crear una función que compruebe si el input ya ha sido reemplazado?

[venkman]

Pues sinceramente no he encontrado mejor solución que el setTimeout. Eso sí, el código que has puesto me da otros problemas (principalmente porque los eventos, como onfocus y onblur, no deberías asignarlos con setAttribute)

Por cierto, es interesante lo que intentas hacer. No lo había visto antes.

[Dude--]

Iniciado por venkman

Pues sinceramente no he encontrado mejor solución que el setTimeout. Eso sí, el código que has puesto me da otros problemas (principalmente porque los eventos, como onfocus y onblur, no deberías asignarlos con setAttribute)

Por cierto, es interesante lo que intentas hacer. No lo había visto antes.

Lo de los eventos estoy intentando solucionarlo en este otro hilo, pero no hay manera...
http://www.forosdelweb.com/f13/dom-f...0/#post2869542

Respecto al problema del timeout supongo que se podría añadir después del replace un createElement que insertara otro input, pero hidden por ejemplo, cuya única función sería simplemente verificar al script que el replace anterior ya se ha realizado y en dicho momento asignar el foco ¿qué te parece la idea?

PD: ¿Qué parte es la que te resulta interesante?

[venkman]

Quizá más que interesante debí decir curioso. Y me refiero a la forma de plantear la solución...

Quiero decir que es un poco complicado lo que estás haciendo para un efecto relativamente sencillo. Entiendo que lo que quieres es que se vea un valor indicativo en el campo, cuando el usuario no lo ha rellenado aún, y que cuando vaya a escribir ese valor no esté. Y entiendo la dificultad que supone un campo de tipo password, porque claro, si le pones un valor, sólo se ven asteriscos...

Entonces tu solución es manipular el DOM para cambiar ese campo por uno de tipo texto y luego volver a cambiarlo cuando sí que escribe algo... Bien, vale...

Sin embargo esto es una operación un tanto costosa, precisamente porque tienes que reconstruir el campo y eso, además de otras cosas, da algunos problemas, como has visto ya.


Ahora bien... Lo que se me ocurre es que se podría orientar el problema de una forma completamente distinta. En el fondo qué es esto? Es un problema de presentación. Hay algo que está visible cuando un campo está vacío y está invisible cuando el campo está relleno.

Así que una solución que no requiere andar jugando con los campos es tener el literal en un span o un div. Y que el campo y el div queden justo encima uno del otro (solapados) y cuando quieres haces que el literal sea visible y cuando no, lo ocultas.

[Dude--]

Creo que entiendo tu idea, no se me había ocurrido la verdad, parece una solución más sencilla, con tu permiso voy a desmenuzarla un poco tal y como yo la desarrollaría, señalando los problemas que veo y me comentas.

Lo que dices es un div o span que mediante CSS se posicionaría solapado con el campo del formulario y al hacer click en el, mediante las mismas hojas de estilo se pondría en hidden dejando a la vista el input. Todo esto esta muy bien pero un posicionamiento tan "exacto" ¿cómo se logra teniendo en cuenta el escaso soporte de los estandar w3c en los distintos navegadores? ¿es posible? ¿y si además el formulario no estuviera fijo a la derecha (como de momento esta en mi caso)? supongo que sería más complejo o incluso requeriría de algún javascript para calcular la posición ¿no?. Si superáramos todo eso aun así habría que asignar el foco al input que esta "debajo" ¿no?.

PD: No has comentado nada sobre la "solución" que plantee para el problema del timeout en mi anterior post.

Una vez más gracias por tu tiempo.

[venkman]

No comenté lo del otro campo oculto y tal porque... no sé, es un poco... quiero decir... no sé muy bien qué decir, no sé si con eso va a ir bien o no. Es el típico apaño que es cuestión de probarlo y verlo.

[Dude--]

Bueno todo esto me ha servido para aprender más sobre javascript y DOM pero creo que te haré caso, he modificado mi script y ahora es mucho más reducido además de coherente porque separa el estilo de la estructura.

Código css:

.inputemail { background: url(img/icontest.gif) no-repeat left; }
.inputpassword{ background: url(img/icontest.gif) no-repeat left; }
 

Código javascript:

function checkevent(e)
{
    var objeto=e.srcElement || e.target;
    var evento = e.type;
                
    if ( objeto.name == "email" )
    {
        if(evento == "focus")
        { objeto.className = ""; }
        if(evento == "blur" && objeto.value == "" )
        { objeto.className = "inputemail"; }
    }           
    if ( objeto.name == "pass" )
    {
        if(evento == "focus")
        { objeto.className = ""; }
        if(evento == "blur" && objeto.value == "")
        { objeto.className = "inputpassword"; }
    }       
}
 

Código html:

<form id="identificacion" action="index.php" method="post" enctype="application/x-www-form-urlencoded">
    <input id="email" type="text" name="email" title="Email de usuario" value="" size="20" />
    <input id="pass" type="password" name="pass" value="" size="15" />
    <input type="submit" value="Iniciar" /> 
</form>
 

Código javascript:

<script>
    var inputemail = document.getElementById("email");
    var inputpass = document.getElementById("pass");
    
    //Inicializa las clases de los dos inputs
    inputemail.className = "inputemail";
    inputpass.className = "inputpassword";
 
    if (inputemail.addEventListener) //W3C DOM
    {
        inputemail.addEventListener('focus', function(event) { checkevent(event) }, false);
        inputemail.addEventListener('blur', function(event) { checkevent(event) }, false);
    } 
    else //IE DOM
    {
        inputemail.attachEvent('onfocus', function(event) { checkevent(event) });
        inputemail.attachEvent('onblur', function(event) { checkevent(event) });
    }
    
    if (inputpass.addEventListener) //W3C DOM
    {
        inputpass.addEventListener('focus', function(event) { checkevent(event) }, false);
        inputpass.addEventListener('blur', function(event) { checkevent(event) }, false);
    } 
    else //IE DOM
    {
        inputpass.attachEvent('onfocus', function(event) { checkevent(event) });
        inputpass.attachEvent('onblur', function(event) { checkevent(event) });
    }
    </script>