cambiar el tipo de entrada html por JS?

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'?

Fuente

2012-02-01 user1150271

Probar:

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

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

Fuente

2012-02-01 10:10:51 deed02392

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

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

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

<!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>

Fuente

2012-02-01 10:16:10

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>

Fuente

2012-02-01 10:20:29

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

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

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

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

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

Fuente

2012-02-01 10:23:59 Evert

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>

Fuente

2012-09-30 17:16:48 Sventek

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";

Fuente

2014-02-12 17:03:30 squarcle

cambiar el tipo de entrada html por JS?

Respuesta

Cuestiones relacionadas