Cómo mostrar texto en el campo de contraseña

Question

Tengo el campo de contraseña en la página. Quiero mostrar el texto "Introducir contraseña" en la pantalla antes de introducir la contraseña, pero el foco cuando el usuario introduce la contraseña que debe volver a tipo de contraseña

EDIT: Estoy usando jQuery, así que cualquier solución jQuery pequeña hará

Answer 1

[Última revisision para incluir soporte IE]
^{Actualización para IE9: Versión 9 de IE permite el cambio del atributo tipo para elementos de entrada de tipo de texto/contraseña de ida y vuelta}

Como se mencionó en los comentarios (y verificado), los ejemplos anteriores no funcionaron en IE, ya que no permite el cambio del tipo por script ... Aquí hay una solución, que reemplaza el elemento por otro de ida y vuelta (El código asume que comienza con un cuadro de texto)

var element = document.getElementById('mysearch'); 

var text_to_show = 'Enter Password'; 

element.value = text_to_show; // set the message for the first time 

element.onfocus = function(){ 
         if (this.value == text_to_show) 
          { 
          var newElement = convertType(this); 
          newElement.value = ''; 
          setTimeout(function(){document.getElementById(newElement.id).focus()},100); 
          } 
         } 
element.onblur = function(){ 
         if (this.value == '') 
          { 
          var newElement = convertType(this); 
          newElement.value = text_to_show; 
          } 
        } 


function convertType(elem) 
{ 
    var input = document.createElement('input'); 
    input.id = elem.id; 
    input.value = elem.value; 
    input.onfocus = elem.onfocus; 
    input.onblur = elem.onblur; 
    input.className = elem.className; 
    if (elem.type == 'text') 
     { input.type = 'password'; } 
    else 
     { input.type = 'text'; } 

    elem.parentNode.replaceChild(input, elem);   
    return input; 
} 

[Actualización]

chatarra de la respuesta original, echaba de menos la parte que desea mantener el campo como contraseña (con contenidos ocultos)

Respuesta modificada:

var element = document.getElementById('mysearch'); 

var text_to_show = 'Enter Password'; 
element.type="text"; // set the type to text for the first time 
element.value = text_to_show; // set the message for the first time 
element.onfocus = function(){ 
         if (this.value == text_to_show) 
          { 
          this.type="password"; 
          this.value = ''; 
          } 
         } 
element.onblur = function(){ 
         if (this.value == '') 
          { 
          this.type="text"; 
          this.value = text_to_show; 
          } 
         } 

[respuesta original]

var element = document.getElementById('inputID'); 
// inputID should be the ID given to the password element 

var text_to_show = 'Enter Password' 
element.value = text_to_show; 
element.onfocus = function(){ if (this.value == text_to_show) this.value = '';} 
element.onblur = function(){ if (this.value == '') this.value = text_to_show;} 

Answer 2

Puede usar this jQuery plugin, que admite campos de contraseña.

Answer 3

Usted puede darle una imagen de fondo con el texto Enter Password que cambian dinámicamente usando JavaScript (idealmente por sólo la eliminación de una clase CSS),

<input type="password" class="enter-password"> or 
<input type="password" style="background-image:url('enter-password.png');"> 

o colocar un falso input que se sustituye por el JavaScript para una contraseña input.

No estoy seguro de qué tan bien cruzaría el navegador para cambiar el tipo de input sobre la marcha.

document.getElementsByTagName("input")[0].type = "text" /* change a hidden field to text*/ funciona en Firefox, pero no confiaría en que funcione bien en IE sin probar.

Answer 4

[respuesta revisada] compatibilidad Agregado para IE6 de this website

<form id="form1" name="form1" method="post" action=""> 
    <input onfocus="clear_field(this,'Enter Username')" onBlur="revert_field(this,'Enter Username')" name="username" type="text" id="username" value="Enter Username" /> 
    <p> 
<input type="text" id="passwordtext" value="Password" onclick="switchto(1)" onkeydown="switchto(1)"> 
<input type="password" id="password" value="" onblur="if (this.value=='')switchto(0)" style="display:none"> 
    <p> 
    <input type="submit" name="button" id="button" value="Submit" /> 
    </p> 
</form> 

<script> 
function switchto(q){ 
    if (q){ 
     document.getElementById('passwordtext').style.display="none"; 
     document.getElementById('password').style.display="inline"; 
     document.getElementById('password').focus(); 
    } else { 
     document.getElementById('password').style.display="none"; 
     document.getElementById('passwordtext').style.display="inline"; 
    } 
} 
function clear_field(field,text){ 
if(field.value==text){ 
    field.value = ""; 
    } 
} 
function revert_field(field,text){ 
if(field.value==""){ 
    field.value = text; 
    } 
} 
</script> 

[publicación anterior] quizás esta ayuda.

<script> 
function clear_field(field){ 
field.value=''; 
} 
function change(){ 
document.getElementById('pass').value=''; 
document.getElementById('pass').type='password'; 

} 
</script> 

Answer 5

Hay varias maneras de hacerlo, pero aquí es una forma. No digo que esto sea eficiente, pero esto explicará mejor lo que está sucediendo.

¡Cópialo y pega esto para probarlo!

<body> 
<script type="text/javascript"> 

    text=document.createElement("input"); 
    text.type="text"; 
    text.value="password"; 
    text.setAttribute("onclick", 'toPassword();'); 
    text.setAttribute("onblur", 'toText();'); 
    document.getElementsByTagName("body")[0].appendChild(text); 

    function toText() 
    { 
     if(document.getElementsByTagName("input")[0].value=="password" || document.getElementsByTagName("input")[0].value=="") 
     { 
      document.getElementsByTagName("input")[0].type="text"; 
      document.getElementsByTagName("input")[0].value="password" 
     } 
    } 

    function toPassword() 
    { 
     if(document.getElementsByTagName("input")[0].value=="password" || document.getElementsByTagName("input")[0].value=="") 
     { 
      document.getElementsByTagName("input")[0].type="password"; 
      document.getElementsByTagName("input")[0].value="" 
     } 
    } 
</script> 
</body> 

Se crea un campo de texto con el valor de password y luego, cuando se hace clic en él, a continuación, cambia de campo de contraseña y elimina su valor. Si hace clic y no ingresó nada, regresará a text y cambiará su valor a password.

También puede ingresar un campo de texto junto con menos código de javascript, todo lo que necesitaría son las funciones.

Si desea que esto funcione en IE, deberá crear dos entradas, una para el texto y otra para la contraseña, y alternar display=none y display=block en cada una de ellas.

element.style.display="none"; 

Answer 6

Si no desea utilizar un plugin (como el de SLaks' answer), que tiene que sea la posición de una etiqueta sobre el campo de contraseña (lo que hace el plugin), u ocultar el campo de la contraseña y el espectáculo una entrada de texto en su lugar hasta que se enfoca.

Internet Explorer no le permite cambiar el tipo de una entrada de "contraseña" a "texto", por lo que cualquier solución que intente hacer eso no funcionará en IE.

Aquí hay un ejemplo que funciona en al menos IE7 (es si funciona en IE6, pero no lo he probado), Chrome y Firefox.

jQuery(function($) { 
    function make_label_field(password_input, label) { 
     var new_input = document.createElement("input"); 
     new_input.type = "text"; 
     new_input.size = password_input.size; 
     new_input.className = password_input.className; 
     new_input.setAttribute("style", password_input.getAttribute("style")); 
     // Copy any additional properties you need. You may want to add a class 
     // to style the label differently 

     new_input.value = label; 

     $(new_input).focus(function() { 
      $(this).hide(); 
      $(password_input).show().focus(); 
     }); 
     return new_input; 
    } 

    $("input[type=password]").each(function() { 
     $(this).after(make_label_field(this, "Enter password")).hide(); 
    }).blur(function() { 
     if (this.value == "") { 
      $(this).hide().next().show(); 
     } 
    }); 
});