javascript - validacion - validar formulario php antes enviar
Cuando un usuario haga clic en Mostrar enlace, muestre la contraseña, ocúltela cuando vuelva a hacer clic (11)
Estoy tratando de hacer que este simple script funcione. Básicamente, cuando un usuario hace clic en el enlace Mostrar, mostrará la contraseña en el cuadro de texto de contraseña y la ocultará cuando se haga clic nuevamente. He buscado soluciones pero no pude encontrar nada para lo que necesito. Aquí está el código:
JavaScript
function toggle_password(target){
var tag = getElementById(target);
var tag2 = getElementById("showhide");
if (tag2.innerHTML == ''Show''){
tag.setAttribute(''type'', ''text'');
tag2.innerHTML = ''Hide'';
}
else{
tag.setAttribute(''type'', ''password'');
tag2.innerHTML = ''Show'';
}
}
HTML
<label for="pwd0">Password:</label>
<input type="password" value="####" name="password" id="pwd0" />
<a href="#" onclick="toggle_password(''pwd0'');" id="showhide">Show</a>
Cuando hago clic en el enlace, no pasa nada. He probado esto sin usar la sentencia if y todavía no hice nada.
Aquí hay un ejemplo usando jQuery ( pastebin ):
$(document).ready(function() {
$("#showHide").click(function() {
if ($(".password").attr("type") == "password") {
$(".password").attr("type", "text");
} else {
$(".password").attr("type", "password");
}
});
});
#showHide {
width: 15px;
height: 15px;
float: left;
}
#showHideLabel {
float: left;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" class="password" size="25">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="showHide" />
<label for="showHide" id="showHideLabel">Show Password</label>
</td>
</tr>
</table>
Fuentes:
http://www.voidtricks.com/password-show-hide-checkbox-click/
Aunque la pregunta todavía tiene la respuesta, todavía estoy publicando esta respuesta.
function toggle_password () {
var tag = document.getElementById("pwd0");
var tag2 = document.getElementById("showhide");
if (tag2.innerHTML == ''Show''){
tag.type="text";
tag2.innerText = ''Hide'';
}
else {
tag.type="password";
tag2.innerText = ''Show'';
}
}
<label for="pwd0">Password:</label>
<input type="password" value="####" name="password" id="pwd0" />
<a href="#" onclick="toggle_password();" id="showhide">Show</a>
Creo que así es como querías:
function toggle_password(){
var d = document;
var tag = d.getElementById("pwd");
var tag2 = d.getElementById("showhide");
if (tag2.innerHTML == ''Show''){
tag.setAttribute(''type'', ''text'');
tag2.innerHTML = ''Hide'';
} else {
tag.setAttribute(''type'', ''password'');
tag2.innerHTML = ''Show'';
}
}
#input_field{
margin:25px;
padding:25px;
border:5px solid black;
}
<html>
<head>
</head>
<body>
<div id="input_field">
<label for="pwd">Password:</label>
<input type="password" value="" name="password" id="pwd" />
<a href="#" onclick="toggle_password();"
id="showhide">Show</a>
<div>
</body>
</html>
Debido a razones de seguridad, no puede cambiar el tipo de un elemento de entrada. Tienes que reemplazar todo el elemento por uno nuevo.
Es realmente fácil de lograr ... Encontré esta publicación de blog que describe la forma de hacerlo con unas pocas líneas de código. Creo que no es una buena práctica mantener una opción como esta porque las contraseñas deben tratarse con seriedad.
Aquí está el código de esa página; utiliza el mismo enfoque que el descrito. pero usa una casilla de verificación. Y prácticamente he visto lo que él señala en oss como Linux. ni siquiera dejan un rastro de la contraseña con un asterisco (pero la cosa de la interfaz de usuario sí lo hace, no sé si realmente les importa la privacidad de pw o les resulta difícil hacerlo en la línea de comandos ;-))
var textbox_elem = document.getElementById("password");
if(check_box.checked)
textbox_elem.setAttribute("type", "text");
else
textbox_elem.setAttribute("type", "password");
No cambie el tipo de entrada, cambie el tamaño del texto. Hazlo muy pequeño para esconderlo.
Podría usar un script en línea para una implementación simple de mostrar / ocultar contraseña.
<form>
<input
onmouseover="this.setAttribute(''type'',''text'')"
onmouseout="this.setAttribute(''type'',''password'')"
placeholder="Hover to show password!"
type="password"
name="password-login"
id="password-login"
>
</form>
Si hacemos un tipo de cuadro de texto como "passowrd" , los caracteres no se muestran y cuando hacemos un cuadro de "text" caracteres "text" se muestran a medida que escribimos.
Por eso la lógica es muy simple. Podemos cambiar el tipo de cualquier elemento HTML mediante la función "setAttribute(type,newvalue)" de JavaScript.
Un ejemplo de código completo se puede ver en el siguiente enlace:
http://www.tutor4web.com/javascript/how-to-show-password-as-text-with-checkbox-using-javascript/
no estabas usando el document para getElementById
function toggle_password(target){
var d = document;
var tag = d.getElementById(target);
var tag2 = d.getElementById("showhide");
if (tag2.innerHTML == ''Show''){
tag.setAttribute(''type'', ''text'');
tag2.innerHTML = ''Hide'';
} else {
tag.setAttribute(''type'', ''password'');
tag2.innerHTML = ''Show'';
}
}
id nombres de id son ilegales y es difícil trabajar con ellos: pwd''.$x.'' No puedes tener algunos de esos caracteres.
La especificación HTML 4.01 establece que los tokens de ID deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier número de letras, dígitos ([0-9]), guiones (-), guiones bajos (_) , dos puntos (:) y puntos (.).
Además, este método no funcionará en todos los navegadores, en IE <9, por ejemplo, solo puede cambiar .type antes de que el elemento se adjunte al documento
Intenta intercambiarlos:
function swapInput(tag, type) {
var el = document.createElement(''input'');
el.id = tag.id;
el.type = type;
el.name = tag.name;
el.value = tag.value;
tag.parentNode.insertBefore(el, tag);
tag.parentNode.removeChild(tag);
}
function toggle_password(target){
var d = document;
var tag = d.getElementById(target);
var tag2 = d.getElementById("showhide");
if (tag2.innerHTML == ''Show''){
swapInput(tag, ''text'');
tag2.innerHTML = ''Hide'';
} else {
swapInput(tag, ''password'');
tag2.innerHTML = ''Show'';
}
}
espero que esto ayude -ck
tu solución puede ser
function toggle_pass(){
var pass = document.getElementById(''showhide'').innerHTML;
if(pass=="show")
{
document.getElementById(''pwd0'').type = "text";
pass= "Hide";
}
else
{
document.getElementById(''pwd0'').type = "password";
pass = "Show Password";
}
}
http://www.voidtricks.com/password-show-hide-checkbox-click/ Este es un tutorial simple para mostrar una contraseña en un cuadro de entrada cuando se marca una casilla de verificación y se oculta cuando la casilla de verificación no está marcada con jQuery.
Javascript
<script type="text/javascript">
$(document).ready(function () {
$("#showHide").click(function () {
if ($(".password").attr("type")=="password") {
$(".password").attr("type", "text");
}
else{
$(".password").attr("type", "password");
}
});
});
</script>
<!-- language: lang-html -->
HTML *
<input type="password" class="password"><br>
<input type="checkbox" id="showHide"> Show?
* Tenemos un campo de entrada de contraseña con la clase "contraseña" y una casilla de verificación con la identificación "mostrar Ocultar"
Una solución sencilla para mostrar / ocultar la contraseña mediante casillas de verificación, y este es el nivel de noob, simplemente copiar / pegar. HECHO !!! ;-)