Conjunto valor predeterminado de una introducción de la contraseña para que pueda ser leído

Quiero tener un campo de contraseña que dice "contraseña" en ella antes de que un usuario introduce su contraseña (para que sepan lo que el campo es)Conjunto valor predeterminado de una introducción de la contraseña para que pueda ser leído

I' prefiero usar Javascript, importar jQuery solo parece un desperdicio, pero no tengo idea de cómo hacerlo. Las imágenes explican con toda claridad:

Lo que parece:

enter image description here

lo que quiero que se vea como:

enter image description here

Es sólo una manera muy sencilla sitio web y el más básico de los inicios de sesión (no tiene validación, etc.)

¿Alguna idea?

<input id="username" name="username" class="input_text" type="text" value="Username" /> 
<input id="password" name="password" class="input_text" type="password" value="Password" />

Fuente

2011-01-25 theorise

Usted podría ser capaz de hackearlo cambiando dinámicamente el tipo de campo (es decir, primero "texto", cambiar a "contraseña" en la activación). No estoy 100% seguro de que esto funcione. –

Cambiar la entrada password a ser un simple tipo de entrada text. Luego, con JavaScript (o JQuery) en el evento de enfoque, cámbielo para que sea un tipo de entrada password.

Aquí está una pequeña muestra no probada con JavaScript normal (sin JQUERY):

<html> 
<head> 
    <script type="text/javascript"> 
     function makeItPassword() 
     { 
     document.getElementById("passcontainer") 
      .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>"; 
     document.getElementById("password").focus(); 
     } 
    </script> 
</head> 
<body> 
    <form> 
     <span id="passcontainer"> 
     <input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" /> 
     </span> 
    </form> 
</body> 
</html>

Fuente

2011-01-25 18:08:52

+1. Así es como lo haría. '$ (" # contraseña "). bind (" foco ", función() {$ (este) .val (" "); $ (este) .attr (" tipo "," contraseña ");});' –

Tenga en cuenta que cambiar el 'tipo 'de elementos de' entrada 'no funcionará correctamente en IE. Ver también: http://stackoverflow.com/questions/1544317/ – CMS

@CMS: Gran punto. ¡No lo sabía! –

Una solución simple:

<input id="username" name="username" class="input_text" type="text" placeholder="Username" /> 
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

Fuente

2011-01-25 19:29:44 Ms2ger

Si está utilizando HTML5 entonces usted debe utilizar el placeholder attribute.

<input id="username" name="username" class="input_text" type="text" placeholder="Username" /> 
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

Si está usando HTML 4 se puede crear un fake password field.

<script type="text/javascript"> 
    function pwdFocus() { 
     $('#fakepassword').hide(); 
     $('#password').show(); 
     $('#password').focus(); 
    } 

    function pwdBlur() { 
     if ($('#password').attr('value') == '') { 
      $('#password').hide(); 
      $('#fakepassword').show(); 
     } 
    } 
</script> 

<input id="username" name="username" class="input_text" type="text" v="Username" /> 
<input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" /> 
<input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />

Fuente

2011-04-26 21:30:46

-2

tuve otra idea para hacer frente a este problema y se necesita ninguna Javascript:

<input onclick="value=''; type='password';" name="password" type="text" value="Password" />

o también puedes hacerlo de esta manera:

<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />

No sé la diferencia entre estas posibilidades. Otra cosa que podría cambiar es escribir en lugar de onclick=.......onfocus=.....

No sé la diferencia aquí, también.

Pero espero poder ayudarte. PD: lo siento por mi mal inglés, soy alemán.

Fuente

2013-03-28 21:01:59 Leon5637

"no necesitará Javascript" - este _es_ JavaScript. – MrWhite

Agregue el código siguiente a su javascript:

function makePasswordHidden() { 
    document.getElementById("password").setAttribute("type", "password"); 
}

cambiar la entrada para que la contraseña:

<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">

Lo que esto hace que hace que el elemento de entrada de una 'contraseña' y el valor se actualiza para que esté oculto. Si desea para el valor = "contraseña" para que sea visible si el campo se deja en blanco a continuación, agregue la siguiente función javascript:

function makePasswordShown() { 
    document.getElementById("password").setAttrivute("type", "text"); 
}

Y añada lo siguiente a la introducción de la contraseña:

onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"

Fuente

2015-06-19 22:35:58

Conjunto valor predeterminado de una introducción de la contraseña para que pueda ser leído

Respuesta

Cuestiones relacionadas