2012-02-01 13 views
21

cómo hacer esto a través de la propia etiqueta cambio de tipo de texto para la contraseñacambiar el tipo de entrada html por JS?

<input type='text' name='pass' /> 

¿Es posible insertar JS dentro de la etiqueta de entrada en sí para cambiar type = 'text' para escribir = 'password'?

Respuesta

18

Probar:

<input id="hybrid" type="text" name="password" /> 

<script type="text/javascript"> 
    document.getElementById('hybrid').type = 'password'; 
</script> 
+0

Esto supone que la entrada se parece a esto '' a fin de recordar para asignar una identificación para que – MMM

+0

Como no podía ser hecho dentro de la etiqueta en sí sin usando el script – user1150271

+1

Al usar cualquiera de los eventos que un campo de entrada puede tener: onfocus, onclick, etc., y colocando algo como 'this.type = 'password''. – deed02392

0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<script type="text/javascript" language="javascript"> 
function changefield(){ 
    document.getElementById("passwordbox").innerHTML = "<input id=\"passwordfield\" type=\"password\" name=\"password-field\" title=\"Password\" tabindex=\"2\" />"; 
    document.getElementById("password-field".focus(); 
} 
</script> 
</head> 

<body> 
<div id="passwordbox"> 
<input id="password-field" type="text" name="password-field" title="Password"onfocus="changefield();" value="Password" tabindex="2" /> 
</div> 
<input type="submit" name="submit" value="sign in" tabindex="3" /> 

</body> 
</html> 
9

Cambio de la type de un <input type=password> lanza un error de seguridad en algunos navegadores (antiguas versiones de IE y Firefox).

Deberá crear un nuevo elemento input, establecer su type en el que desee y clonar todas las demás propiedades del existente.

hago esto en mi plugin de marcador de posición jQuery: https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L80-84

Para trabajar en Internet Explorer:

  • crear dinámicamente un nuevo elemento
  • copiar las propiedades del elemento usado en el nuevo elemento
  • establece el tipo del nuevo elemento en el nuevo tipo
  • reemplaza el elemento anterior con el nuevo elemento

Ésta función lleva a cabo las tareas anteriores para usted:

<script> 
function changeInputType(oldObject, oType) { 
    var newObject = document.createElement('input'); 
    newObject.type = oType; 
    if(oldObject.size) newObject.size = oldObject.size; 
    if(oldObject.value) newObject.value = oldObject.value; 
    if(oldObject.name) newObject.name = oldObject.name; 
    if(oldObject.id) newObject.id = oldObject.id; 
    if(oldObject.className) newObject.className = oldObject.className; 
    oldObject.parentNode.replaceChild(newObject,oldObject); 
    return newObject; 
} 
</script> 
+0

¿Funcionaría esto sin usar todas las condiciones if? Estoy teniendo el mismo problema, pero no necesito que los objetos se igualen entre sí. –

+1

@JPHochbaum Seguro. De hecho, mi respuesta original no contenía todo ese código adicional; alguien más lo agregó. –

0

Esto no es compatible con todos los navegadores (IE si no recuerdo), pero funciona en el resto:

document.getElementById("password-field").attributes["type"] = "password"; 

o

document.getElementById("password-field").attributes["type"] = "text"; 
3

Esto es lo que tengo para la mía.

Básicamente está utilizando los comandos onfocus y onblur en la etiqueta para activar el javascript apropiado. Podría ser tan simple como:

<span><input name="login_text_password" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="this.select(); this.setAttribute('type','text');" /></span> 

Un evolucionó versión de este comprobaciones básicas de funcionalidad en relación y la cadena vacía y devuelve la introducción de la contraseña de nuevo a la original "contraseña" en el caso de un cuadro de texto nulo:

<script type="text/javascript"> 
     function password_set_attribute() { 
      if (document.getElementsByName("login_text_password")[0].value.replace(/\s+/g, ' ') == "" || document.getElementsByName[0].value == null) { 
       document.getElementsByName("login_text_password")[0].setAttribute('type','text') 
       document.getElementsByName("login_text_password")[0].value = 'Password'; 
      } 
      else { 
       document.getElementsByName("login_text_password")[0].setAttribute('type','password') 
      } 
     } 
    </script> 

Dónde HTML se parece a:

<span><input name="login_text_password" class="roundCorners" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="password_set_attribute();" /></span> 
0

he tenido que añadir un '.value' al final del código de Evert para que funcione.

También lo combiné con una comprobación de navegador para que el tipo de entrada = "número" cambie a type = "text" en Chrome ya que 'formnovalidate' no parece funcionar en este momento.

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) 
    document.getElementById("input_id").attributes["type"].value = "text"; 
Cuestiones relacionadas