como alternar letras y **** en un campo de contraseña?

[birdaleja]

hola,
estoy haciendo un formulario que tiene un campo para usuario y otro para contraseña. Como estoy utilizando placeholders tengo que utilizar javascript ya que en 2 navegadores (firefox, internet explorer) aun no tienen soporte para los placeholders (html5).

Este javascript simula el placeholder asi que ya veo el texto escrito en el campo cuando inicio el form, al hacer click se borra este texto y ya puedo escribir.

El problema es la contraseña, ya que en los navegadores que si soportan placeholders al iniciar el formulario el campo de contraseña dice "contraseña" al hacer click y escribir veo los famosos ****. Pero en los navegadores que no lo soportan, en vez de **** veo las letras.

Me gustaría arreglar esto para que funcione como lo hace el placeholder. Y como ya he visto sitios donde piden contraseña con una opción tipo "box" al lado para ver lo que se escribe, supongo que con javascript se puede alternar de letras a **** y viceversa.

Alguien tiene una idea de como lograr esto?? muchas muchisimas gracias!

[enrique4480]

cambiale el type a text o password cuando necesites hacer eso.

[birdaleja]

gracias por responder! justamente es lo que intento hacer pero la verdad que no se bien como, es decir inicialmente le pongo al campo de contraseña: type="text" pero cómo lo cambiaría a "password" si al hacer click en el campo el valor es igual al del placeholder?

el javascript que simula el placeholder es este:

Código:

$(document).ready(function() {
	if(!Modernizr.input.placeholder){
		$("input").each(
			function(){
				if($(this).val()=="" && $(this).attr("placeholder")!=""){
					$(this).val($(this).attr("placeholder"));
					$(this).focus(function(){
						if($(this).val()==$(this).attr("placeholder"))$(this).val("");
						$(this).type("password"); //esto es lo que intento hacer pero esta mal!
						
					});
					$(this).blur(function(){
						if($(this).val()=="") $(this).val($(this).attr("placeholder"));
					});
				}
		});
	}

[enrique4480]

si pones el html para ver como esta todo mejor.

[birdaleja]

Claro, tienes razón!

Código:

<form id="form1" name="form1" method="post" action="valida.php">
	<input name="usuario" type="text" placeholder="usuario*" class="globo-form" />
        <input name="password" type="text" placeholder="contraseña*" class="globo-form" />
        <div id="bg-ingresar">
              <input name="submit" type="submit" value="" class="form-login" />
        </div>
</form>

[enrique4480]

Código Javascript:

$(document).ready(function() {
  $(".globo-form").focus(function(){
    if($(this).attr("placeholder")=="contrasena")
    {
     this.setAttribute("type","password");
    }             
  });
});
 

[birdaleja]

Perfecto! lo pude implementar a mi codigo, muchisisisimas gracias enrique4480, no sabia de la existencia de setAttribute

asi quedo:

Código:

$(document).ready(function() {
	if(!Modernizr.input.placeholder){
		$("input").each(
			function(){
				this.setAttribute("type","text");
				
				if($(this).val()=="" && $(this).attr("placeholder")!=""){
					$(this).val($(this).attr("placeholder"));
					$(this).focus(function(){
						if($(this).val()==$(this).attr("placeholder")) 
                                                 $(this).val("");
						
						 if($(this).attr("placeholder")=="contraseña*")
						 {
							this.setAttribute("type","password");
						 }
					});
					$(this).blur(function(){
						if($(this).val()=="") 
						{
							$(this).val($(this).attr("placeholder"));
							this.setAttribute("type","text");
						}
					});
				}
		});
	}

y en el html el type="password"

saludos

[_cronos2]

¿No existe una función set en jQuery equivalente a setAttribute?
Y en principio no haría falta usar setAttribute, vale con input.type='password' .
Saludos (:

[enrique4480]

esta attr() pero por alguna razon el type no lo cambia.

[_cronos2]

¿Pero attr no es como getAttribute?

[enrique4480]

attr como otras en jquery es tanto para obtener como para poner. attr()

[_cronos2]

Ok, iba a editar pero ya habías contestado XD
Gracias por la aclaración, no suelo trabajar con jQuery, ni con librerías en general.
Saludos (:

[enrique4480]

no hay de que, tal como esta mostrada la documentacion puede llevar a confusion ya que lo primero que ves es "get value bla bla".

no suelo trabajar con jQuery, ni con librerías en general.

yo no suelo tampoco, pero me parece un framework muy interesante. lo que si que veo es un (ab)uso excesivo de jquery para practicamente cualquier cosa, pero eso ya cada uno con su cuerpo ;).

un saludo.

[birdaleja]

parecía todo resuelto, hasta la hora de probarlo en internet explorer,solo en este navegador da error.
Parece que no es compatible con estas lineas:
this.setAttribute("type","text"); o this.setAttribute("type","password");

y lo que es peor me han dejado de funcionar todos los .js del sitio...
sabes de alguna otra alternativa, en este caso?

saludos y gracias

[zerokilled]

Iniciado por birdaleja

parecía todo resuelto, hasta la hora de probarlo en internet explorer,solo en este navegador da error.

buenas...

no se si ya lo han comentado porque he leido muy pero muy poco el este tema. de todos modos, aca tiene un tema similar que habla respecto a ese detalle. http://www.forosdelweb.com/showthread.php?t=884994.

[enrique4480]

si :), con css. necesitas añadir un campo mas del tipo password y te creas una clase con display: none, y en el codigo solo cambias las el atributo class para que se muestre uno y se oculte el otro.

Código Javascript:

$(document).ready(function() {
  $(".globo-form").focus(function(){
    if($(this).attr("placeholder")=="contrasena")
    {
     $(this).attr("class","oculto"); //ocultamos el type="text"
     $(this).next().attr("class",""); //mostramos el type="password"
    }             
  });
});
 

Código CSS:

.oculto
{
 display: none;
}
 

[zerokilled]

Iniciado por enrique4480

si :), con css. necesitas añadir un campo mas del tipo password y te creas una clase con display: none, y en el codigo solo cambias las el atributo class para que se muestre uno y se oculte el otro.

¿pero que pasaria si el navegador no puede interpretar javascript? entonces la contraseña se le mostrará. si yo fuera hacer ese modelo que propones, dejaria inicialmente el campo tipo password por si javascript no esta activo. luego con javascript lo cambio mostrando asi el de tipo text. se que es una vuelta enorme pero tampoco se debe corromper con la accesibilidad.

[enrique4480]

si, tienes razon en lo que dices :). ni lo pense, gracias por el dato.

[birdaleja]

no me queda nada claro...

dejaria inicialmente el campo tipo password por si javascript no esta activo. luego con javascript lo cambio mostrando asi el de tipo text

no es esto lo que intentamos hacer desde un inicio, alternar con javascript de tipos? y no dio resultado en internet exp, fue con esta linea que lo alternamos:
this.setAttribute("type","password");

de que otra forma se pueden alternar?

en el caso de agregar un campo más, como sería en html? para estar segura de no estar mal interpretando,


gracias y saludos!

[enrique4480]

no me queda nada claro...

si javascript no esta activado, no se podra hacer el cambio de text a password y se vera la contraseña. pero si hay javascript si puedes cambiar de password a text por ejemplo en el ready de jquery. de este modo si entran con javascript lo veran como quieres y sin javascript lo veran bien (tipo password).

Código HTML:

<form id="form1" name="form1" method="post" action="valida.php">
    <input name="usuario" type="text" placeholder="usuario*" class="globo-form"  />
        <input name="password" type="text" placeholder="contrasena" class="globo-form" />
        <input name="password2" type="password" placeholder="contrasena2" class="oculto" />
        <div id="bg-ingresar">
        <input name="submit" type="submit" value="" class="form-login" />
 

es lo mismo que tenias pero pones un campo mas, acuerdate de aplicar lo que comento zerokilled para que quede bien.

[birdaleja]

bueno, he logrado implementar este método y ha servido muy bien para firefox e internet explorer, pero ahora en los demás navegadores que si soportan el placeholder, no esta funcionando bien, es decir que aqui al hacer click en el campo de contraseña (type="text") no esconde este campo y muestra el de type="password" sino que me permite escribir en el de type="text".

Asi que parece un circulo, salgo de uno para meterme en otro lio. Estoy pensando que la mejor forma será con los backgrounds, aunque me gustaba mas esta,

saludos

[zerokilled]

buenas....

entiendo que es una encrucijada porque a dia de hoy no todos los navegadores tienen soporte completo para html5. la solucion es detectar el soporte del navegador para una caracteristica en particular. en tu caso, podrias detectar si existe la propiedad placeholder en un elemento <input>. de existir, no aplicas las funciones a los elementos, y viceversa. en diveintohtml5.org tienes una lista de diferentes lineas para detectar por caracteristicas.

[_cronos2]

Iniciado por zerokilled

buenas....

entiendo que es una encrucijada porque a dia de hoy no todos los navegadores tienen soporte completo para html5. la solucion es detectar el soporte del navegador para una caracteristica en particular. en tu caso, podrias detectar si existe la propiedad placeholder en un elemento <input>. de existir, no aplicas las funciones a los elementos, y viceversa. en diveintohtml5.org tienes una lista de diferentes lineas para detectar por caracteristicas.

Por lo menos en los primeros posts estaba usando Modernizr, supongo que ahora también XD
Saludos :D

[zerokilled]

ahh vaya, no tenia idea! es que no me he detenido a leer bien todos los mensajes y codigos.

[birdaleja]

si estaba usando Modernizr, pero creo que justamente este es el problema, porque ahora tengo 2 acciones: si se soporta se utiliza el placeholder comunmente en el campo de texto errado, osea el de type=text, y si no se soporta todo va bien. Ahora no encuentro como en Modernizr detectar si se soporta...hacer algo, solo tengo el ejemplo si no se soporta. Si esta bastante confuso...

saludos!

[enrique4480]

bueno, he logrado implementar este método y ha servido muy bien para firefox e internet explorer, pero ahora en los demás navegadores que si soportan el placeholder, no esta funcionando bien, es decir que aqui al hacer click en el campo de contraseña (type="text") no esconde este campo y muestra el de type="password" sino que me permite escribir en el de type="text".

me parece raro, solo estas aplicando el display none, ¿no tendras algun error en el codigo?. di en que navegadores te funciona mal a ver si sacamos algo en claro entre todos.

[birdaleja]

muchas gracias por darle seguimiento al tema, aqui voy a publicar como tengo el codigo hasta ahora.

tambien aclaro que asi esta funcionando exactamente como lo haría un placeholder en internet explorer y firefox (estos son los navegadores que no lo soportan) pero los otros navegadores que si soportan placeholder, no esta funcionando bien ya que se queda en el primer campo (type="text"), son chrome, safari, opera.

saludos!

Código HTML:

<html>
<head>
<script type="text/javascript" src="js/modernizr-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery-placeholder.js"></script>
</head>
<body>
<div id='popup' 
style="height:153px; width:300px; padding:0px; margin:0px; margin-right:-10px; background:url(imgs/bg_registro.jpg) right top repeat-y;}">
   
 <div class="acotacion" id="form-footer" align="center">
   <form id="form1" name="form1" method="post" action="valida.php">
	<input name="usuario" type="text" placeholder="usuario*" class="globo-form" />
        <input name="password" type="password" class="globo-form oculto" />
        <input name="text" type="text" class="globo-form" placeholder="contraseña*" />
        <div id="bg-ingresar">
           <input name="submit" type="submit" value="" class="form-login" />
        </div>
   </form>
 </div>
</div>
</body>
</html> 

jquery-placeholder.js

Código Javascript:

$(document).ready(function() {
    if(!Modernizr.input.placeholder){
        $("input").each(
            function(){
                 
                if($(this).val()=="" && $(this).attr("placeholder")!=""){
                    $(this).val($(this).attr("placeholder"));
                    
                    $(this).focus(function(){
                        if($(this).val()==$(this).attr("placeholder")) $(this).val("");
                        
                        if($(this).attr("name")=="text")
                        {
                            $(this).attr("class","oculto"); //ocultamos el type="text"
                            $(this).prev().attr("class","globo-form"); //mostramos el type="pass"
                            $(this).blur();
                            $(this).prev().focus(); 
                        }
                    });
                    
                    $(this).blur(function(){
                        if($(this).val()=="")
                        {
                            if($(this).attr("name")=="password")
                            {
                                $(this).next().attr("class","globo-form"); //mostramos el type="text"
                                $(this).attr("class","oculto"); //ocultamos el type="pass"
                            }
                            $(this).val($(this).attr("placeholder"));
                        }
                    });
                }
        });
    }
});
 

Código CSS:

.oculto { display: none !important; }
.globo-form{
    display:inline;
    background:#ffffcc;
    border:0px;
    outline:none;
}
 

[enrique4480]

Código Javascript:

$(document).ready(function() {
   $("input[name=password]").attr("class","oculto");
   $("input[name=text]").attr("class","globo-form");
   $(".globo-form").focus(function(){
     if($(this).attr("placeholder")=="contrasena")
     {
      $(this).attr("class","oculto");
      $(this).prev().attr("class","globo-form");
     }
   });
});
 

he cambiado el orden, como ya nos recomendo zerokilled es poner primero el type password por si no dispone de js el navegador. cuando carga la pagina, mostramos el type text. asi tal cual me esta funcionando a mi en chrome.

[birdaleja]

si, tienes toda la razón...me hice un poco de lio con tanta vuelta, pero asi esta funcionando en todos los navegadores, tal como lo haría un placeholder, muchas gracias! creo que estubo muy bien resulto y espero que les sirva a quienes esten intentando hacer algo parecido, muy bueno!

sin duda pasare mas seguido por este foro para aprender mas cosas y en cuanto sea capaz de colaborar lo haré con gusto.

saludos