catturare i clic sui pulsanti in JavaScript senza interazione con il server

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

  •  09-06-2019
  •  | 
  •  

Domanda

Ho un modulo di registrazione che richiede all'utente di inserire la propria email e password, entrambe sono in due caselle di testo separate.Voglio fornire un pulsante su cui l'utente può fare clic in modo che la password (che è mascherata) venga visualizzata in un popup quando l'utente fa clic sul pulsante.

Attualmente il mio codice JavaScript per questo è il seguente:

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

Il problema è che ogni volta che l'utente fa clic sul pulsante, la password viene cancellata sia in Firefox che in IE.Voglio che siano in grado di vedere la propria password in chiaro per verificarla senza doverla digitare nuovamente.

Le mie domande sono:

  1. Perché il campo della password continua a essere reimpostato a ogni clic del pulsante?

  2. Come posso fare in modo che il campo della password NON venga cancellato una volta che l'utente ha visto la sua password in chiaro?

È stato utile?

Soluzione

Ho fatto un rapido esempio di una versione funzionante:

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

La chiave è che l'input sia di tipo pulsante e non di invio.Ho usato il prototipo libreria per recuperare l'elemento tramite ID.

Altri suggerimenti

Sembra che tu stia eseguendo una richiesta al server ad ogni clic, la reimpostazione della casella della password ad ogni caricamento della pagina è un comportamento tipico dei browser.

Non hai detto che stavi usando ASP.NET, ma...

In base alla progettazione, ASP.NET cancella durante il postback il valore dei controlli TextBox la cui modalità è Password.Lavoro attorno a questo in una sottoclasse con il seguente codice:

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

Se non vuoi che il pulsante invii il modulo, assicurati che abbia il tipo "pulsante" anziché "invia".Ad esempio, potresti fare qualcosa del genere:

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

Nel tuo HTML:

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

È necessario utilizzare il "pulsante" anziché "invia" per impedire la pubblicazione del modulo.

Presumo che il browser abbia qualche problema con lo script che tenta di impostare il valore di un campo password:

button.value = password;

Questa riga di codice non ha uno scopo reale. password.value non viene influenzato nelle righe precedenti in cui stai leggendo il valore e utilizzandolo nel file alert().

Questa dovrebbe essere una versione più semplice del tuo codice:

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

}

modificare:in realtà ho appena fatto un rapido test e Firefox non ha problemi a impostare il valore del campo password con un codice come button.value = "blah".Quindi non sembra che sarebbe il caso...Vorrei verificare se il tuo codice ASP.NET sta causando un postback come altri hanno suggerito.

Non è necessario farlo button.value = password; poiché leggere il valore non lo cambia.Non sono sicuro del motivo per cui viene cancellato, forse JavaScript non consente la modifica dei valori del campo password.

ahah!

la risposta se qui:http://forums.asp.net/p/1067527/1548528.aspx

ho capito la soluzione...la soluzione è stata un semplice cambiamento

  OnClientClick="myOnClick()"

A

  OnClientClick="return myOnClick()"

Ecco il codice completamente corretto...

funzione myonclick () {// esegui alcune altre azioni ...restituire falso;} Pagina senza titolo

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top