Alternar visibilidade do campo de senha
Um caso de uso comum é permitir que os preenchimentos de formulário alternem para a visibilidade do texto inserido no campo de senha.
Para concluir este caso de uso, usei o ícone de olho da Biblioteca impressionante de fontes. O CSS necessário e o eye.svg estão incluídos na biblioteca do cliente criada para esta demonstração.
Código de exemplo
O formulário adaptável tem um campo do tipo PasswordBox chamado ssnField.
O código a seguir é executado quando o formulário é carregado
$(document).ready(function() {
$(".ssnField").append("<p id='fisheye' style='color: Dodgerblue';><i class='fa fa-eye'></i></p>");
$(document).on('click', 'p', function() {
var type = $(".ssnField").find("input").attr("type");
if (type == "text") {
$(".ssnField").find("input").attr("type", "password");
}
if (type == "password") {
$(".ssnField").find("input").attr("type", "text");
}
});
});
O CSS a seguir foi usado para posicionar o ícone olho dentro do campo de senha
.svg-inline--fa {
/* display: inline-block; */
font-size: inherit;
height: 1em;
overflow: visible;
vertical-align: -.125em;
position: absolute;
top: 45px;
right: 40px;
}
Implantar a amostra de alternância de senha
- Baixe a biblioteca do cliente
- Baixe o formulário de exemplo
- Importar a biblioteca do cliente usando a interface do usuário do gerenciador de pacotes
- Importar o formulário de exemplo usando o Forms e o Documento
- Visualizar o formulário
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e