Estoy usando el código de abajo y también se ve en este violín http://jsfiddle.net/peter/Xt5qu/ el uso de etiquetas como valores de entrada. ¿Qué cambios puedo hacer para que en los campos de contraseña de la etiqueta es en texto claro, pero como que tipo es oculto?

<form id="new_account_form" method="post" action="#" class="login-form">
<ul>
<li>
<label for="user_email">Email address</label>
<input id="user_email" name="user_email" required="" class="validate[required,custom[email]] clearOnFocus login-itext" type="text">
</li>
<li>
<label for="user_password">Password</label>
<input id="user_password" name="user_password" required="" class="validate[required,minSize[6]] clearOnFocus login-itext" type="password">
</li>
<li>
<input name="Submit" type="submit" class="login-ibutton" value="Sign in"></li>
</ul>
</form>
<script script type="text/javascript">
this.label2value = function(){  
//CSS class names
//put any class name you want
//define this in external css (example provided)
var inactive = "inactive";
var active = "active";
var focused = "focused";
//function
$("label").each(function(){     
obj = document.getElementById($(this).attr("for"));
if(($(obj).attr("type") == "text", "password") || (obj.tagName.toLowerCase() == "textarea")){           
$(obj).addClass(inactive);          
var text = $(this).text();
$(this).css("display","none");          
$(obj).val(text);
$(obj).focus(function(){    
$(this).addClass(focused);
$(this).removeClass(inactive);
$(this).removeClass(active);                                  
if($(this).val() == text) $(this).val("");
}); 
$(obj).blur(function(){ 
$(this).removeClass(focused);                                                    
if($(this).val() == "") {
$(this).val(text);
$(this).addClass(inactive);
} else {
$(this).addClass(active);       
};              
});             
};  
});     
};
//on load
$(document).ready(function(){   
label2value();  
});
</script>

OriginalEl autor Anagio | 2011-09-28

3 Comentarios

  1. 12

    Violín: http://jsfiddle.net/WqUZX/

    No hay manera de hacer eso. Decir, * es el carácter de “esconder” la contraseña. Cuando las entradas que el carácter, la secuencia de comandos no puede “recordar”. Otro problema que puede ocurrir cuando el usuario presiona el delete o backspace clave dentro de la cadena. Pegar una cadena en el cuadro de entrada también puede causar problemas.

    Por supuesto, se podría implementar esta característica, el uso de selectionStart, selectionEnd y un montón de clave de los detectores de eventos. Este enfoque no es impermeable, sin embargo.

    El más cercano fiable solución es cambiar el type a text en el foco, y de vuelta a password en el desenfoque.

    $("#user_password").focus(function(){
    this.type = "text";
    }).blur(function(){
    this.type = "password";
    })

    Como alternativa, puede utilizar mouseover para mostrar la contraseña. De esa manera, el usuario puede elegir fácilmente si la (s)que quiere usar la función de contraseña, o no.

    Gracias, no estoy en busca de una carta de la pantalla, a continuación, ser enmascarada como el iphone plugin de jquery de una respuesta a continuación. Te gustaría ser capaz de mostrarme un ejemplo en jsfiddle de cambiar el tipo de entrada?
    Respuesta actualizada, se ha añadido un enlace. También he incluido un mouseover y mouseout ejemplo en el Violín.
    Ratón fuera trabajado muy bien desde el desenfoque y enfoque estaban en conflicto con mis etiquetas que se utiliza como el valor. Gracias Rob

    OriginalEl autor Rob W

  2. 2

    Puede usar el HTML5 placeholder atributo, pero algunos navegadores no lo soportan. Como una solución, hay este JSFiddle me escribió, que reemplaza la contraseña de entrada con un estándar de entrada de texto, y viceversa, en el focus y blur eventos.

    Código:

    $(document).ready(function() {
    $("input[name='password']").prop("type", "text").val("Password");
    });
    $("input[name='password']").focus(function() {
    if($(this).val() === "Password")
    {
    $(this).prop("type", "password").val("");
    }
    });
    $("input[name='password']").blur(function() {
    if(!$(this).val().length)
    {
    $(this).prop("type", "text").val("Password");
    }
    });

    Este se adaptan adecuadamente para aquellos que tiene JavaScript deshabilitado.

    OriginalEl autor Bojangles

  3. 0

    No hay necesidad de reinventar la rueda si alguien ya lo ha hecho:

    http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/

    Eso es solo un ejemplo que he encontrado con una rápida en Google. Sé con certeza que uno de los otros de desarrollo web, blogs había incluso un limpiador de ejemplo, pero no puedo recordar que lamentablemente.

    Si quieres homebrew una solución, siempre se puede ver cómo la anterior plugin está haciendo, y desarrollar su propia solución basada en los principios.

    OriginalEl autor Greg Pettit

Dejar respuesta

Please enter your comment!
Please enter your name here