cambiar el tipo de un campo de datos

[xcorpyon]

Hola , de nuevo

Pues simple'' eso, lo quiero para un campo de password, así inicialmente pondrá password, y cuando se seleccione, se pondrá con los asteriscos de windows, para que no se pueda ver la contraseña que se escriba

El codigo que tengo es este (fijarse en el onfocus), pero da error:

<input name="pass" type="text" value="password" onfocus="this.type='password';">

Gracias

[TurKa]

Sucede que la instrucción que estás utilizando solo sirve para cambiar o modificar el valor de una propiedad, pero "type" no es una propiedad, sino que indica el "tipo" de "objeto", es decir, que estarías intentando cambiar un objeto por otro: cambiar el objeto password por el objeto text ¿Me entiendes?
Las únicas propiedades que actualmente tiene tu objeto "password" (que en realidad es un objeto "text") son name y value (nombre y valor).

En resumen, no podrás cambiar un objeto por otro.

Lo que puedes hacer es algo más complejo que "simule" que si se está cambiando el objeto. Lo que haces es escribir los dos campos:
un campo text y otro password pero el password mantenerlo oculto hasta que se coloque el foco en el text.
Un ejemplo:

<input name="pass1" type="text" value="password" style="display: block" onfocus="this.style.display='none'; pass.style.display='block'; pass.focus()">
<input name="pass" type="password" value="" style="display: none">

Es un truco que espero que te sirva.

Saludos!!

[xcorpyon]

Felicidades Turka, por tu gran idea,

muchas veces ideas sencillas y efectivas como esta
te resuelven muchos problemas

Gracias

[mickeyy]

hola turka podias explicar que hace cada cosa en las dos lineas de programa que has puest? me interesaria hacer esto pero aplicandolo a otra cosa. Si me dices que hace cada cosa te lo agradeceria porque de javascript se muy poquito. Gracias

[TurKa]

xcorpion, me alegro que te haya servido el ejemplo.

mickeyy, paso a explicarte el código:

Primer input:
<input name="pass1" type="text" value="password"
Hasta aquí todo bien.

style="display: block"
display indica que "desplegue" o no el objeto.
block: indica que debe desplegarlo
el contrario, no desplegar, es none

Cuando se coloca el foco en este objeto (evento onFocus, le pido que haga lo siguiente:

this.style.display='none';
si lo escribiese en castellano diría:
esteObjeto.estilo.desplegar='no desplegar'
Es decir, que lo que estoy haciendo es ocultar este objeto.
Una vez que lo oculto, le digo:
pass.style.display='block';
objetoPass.estilo.desplegar='desplegar'
Es decir, que muestro el segundo objeto, el que verdaderamente es el objeto password.
Y, para disimular el efecto, debo matener el foco en este objeto que estoy mostrando:
pass.focus()

este objeto "password" (llamado "pass"), lo único que tiene, es la indicación de "no desplegarlo" y será el primer objeto, quien se ocupe de desplegarlo en su momento.

Espero haber sido clara

Saludos!!

[caricatos]

Hola a todos:

Mi enhorabuena por la excelente explicación de TurKa (¡Hola !)
Solo quiero añadir que aparte de los estilos para display "block" y "none", existe "inline" que funciona de forma muy parecida a block, pero sin un salto de línea...

En resúmen... cuando se usa block, el siguiente elemento se visualizaría en la siguienete línea, y con inline, se visualiza a continuación...

Hace algún tiempo se preguntó sobre la diferencia entre los tags div y span y una de ellas era la forma de presentarse, y se ha visto que un span con "style='display: block'" se ve igual que un div... y un div con style="display: inline" se ve igual que un span...
En un div existe el atributo align, pero se corresponde con el estilo text-align que se puede aplicar a un span...

Bueno, no es mi intención aburrir a nadie....


Saludos

[TurKa]

Exacto, Don caricatos!!!! (¿cómo va? )
Es verdad y muy bueno que lo hayas mencionado porque a mi, se me pasó de largo, es más, ni lo pensé

Claro, justamente "block" desplega en "bloque" y lo más apropiado para este ejemplo, es "inline", sobre todo, si antes o después del input, hay algún texto o alguna otra "cosa".

El único recaudo a tener en cuenta, es que no debe quedar espacio "&nbsp;" entre un input y el otro ya que éste, se notará al cambiar (mostrar/desplegar) el nuevo input.

Si es necesario, así quedaría el código utilizando inline:

Código:

<input name="pass1" type="text" value="password" style="display: inline" onfocus="this.style.display='none'; pass.style.display='inline'; pass.focus()" size="20"><input name="pass" type="password" value="" style="display: none" size="20">