captura de cliques de botão em javascript sem interação do servidor

StackOverflow https://stackoverflow.com/questions/44401

  •  09-06-2019
  •  | 
  •  

Pergunta

Eu tenho um formulário de inscrição que exige que o usuário insira seu e-mail e senha, ambos em duas caixas de texto separadas.Quero fornecer um botão no qual o usuário possa clicar para que a senha (que está mascarada) apareça em um pop-up quando o usuário clicar no botão.

Atualmente meu código JavaScript para isso é o seguinte:

    function toggleShowPassword() {       
        var button = $get('PASSWORD_TEXTBOX_ID');
        var password;
        if (button)
        {
            password = button.value;
            alert(password);
            button.value = password;  
        } 
   }

O problema é que toda vez que o usuário clica no botão, a senha é apagada tanto no Firefox quanto no IE.Quero que eles possam ver sua senha em texto não criptografado para verificar, sem precisar digitá-la novamente.

Minhas perguntas são:

  1. Por que o campo de senha continua sendo redefinido a cada clique de botão?

  2. Como posso fazer com que o campo de senha NÃO seja limpo depois que o usuário tiver visto sua senha em texto não criptografado?

Foi útil?

Solução

Fiz um exemplo rápido de uma versão funcional:

<html>
    <head>
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript">
            function toggleShowPassword() {       
                var textBox = $('PasswordText');
                if (textBox)
                {
                    alert(textBox.value);  
                } 
            }
        </script>
    </head>
    <body>
        <input type="password" id="PasswordText" /><input type="button" onclick="toggleShowPassword();" value="Show Password" />
    </body>
</html>

A chave é que a entrada seja do tipo botão e não enviar.Eu usei o protótipo biblioteca para recuperar o elemento por ID.

Outras dicas

Parece que você está fazendo uma solicitação ao servidor a cada clique, a caixa de senha sendo redefinida a cada carregamento de página é um comportamento típico dos navegadores.

Você não disse que estava usando ASP.NET, mas...

Por design, o ASP.NET limpa durante o postback o valor dos controles TextBox cujo modo é senha.Eu resolvo isso em uma subclasse com o seguinte código:

// If the TextMode is "password", the Text property won't work
if ( TextMode == System.Web.UI.WebControls.TextBoxMode.Password )
    Attributes[ "value" ] = stringValue;

Se você não deseja que o botão envie o formulário, certifique-se de que ele tenha o tipo 'botão' em vez de 'enviar'.Por exemplo, você pode fazer algo assim:

<input type="button" value="Show My Password" onclick="toggleShowPassword()"/>

No seu HTML:

<input type="button" onclick="toggleShowPassword();">

Você precisa usar “botão” em vez de “enviar” para evitar que seu formulário seja postado.

Eu diria que o navegador tem algum problema com o script que tenta definir o valor de um campo de senha:

button.value = password;

Esta linha de código não tem nenhum propósito real. password.value não é afetado nas linhas anteriores onde você está lendo o valor e usando-o no alert().

Esta deve ser uma versão mais simples do seu código:

function toggleShowPassword() {       
    var button = $get('PASSWORD_TEXTBOX_ID');
    if (button)
    {
        alert(button.value);
    }

}

editar:na verdade, acabei de fazer um teste rápido e o Firefox não tem problemas em definir o valor do campo de senha com código como button.value = "blah".Então não parece que seria esse o caso ...Gostaria de verificar se o seu código ASP.NET está causando um postback, como outros sugeriram.

Você não precisa fazer button.value = password; já que ler o valor não o altera.Não sei por que está sendo limpo, talvez o JavaScript não permita que os valores dos campos de senha sejam modificados.

ah!

a resposta se aqui:http://forums.asp.net/p/1067527/1548528.aspx

Eu descobri a solução...a correção foi uma simples mudança

  OnClientClick="myOnClick()"

para

  OnClientClick="return myOnClick()"

Aqui está o código totalmente corrigido ...

function myOnClick () {// execute algumas outras ações ...retorna falso;} Página não titulada

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top