サーバーとの対話なしでJavaScriptでボタンのクリックをキャッチする

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

  •  09-06-2019
  •  | 
  •  

質問

ユーザーに電子メールとパスワードを入力するよう要求するサインアップ フォームがあります。両方とも 2 つの別々のテキスト ボックスに入力されています。ユーザーがクリックできるボタンを提供して、ユーザーがボタンをクリックしたときにパスワード（マスクされています）がポップアップに表示されるようにしたいと考えています。

現在、このための私の JavaScript コードは次のとおりです。

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

問題は、ユーザーがボタンをクリックするたびに、Firefox と IE の両方でパスワードがクリアされることです。パスワードを再入力しなくても、パスワードを平文で確認して確認できるようにしたいと考えています。

私の質問は次のとおりです。

  1. ボタンをクリックするたびにパスワードフィールドがリセットされ続けるのはなぜですか?

  2. ユーザーが自分のパスワードをクリアテキストで見た後、パスワードフィールドが消去されないようにするにはどうすればよいですか?

役に立ちましたか？

解決

動作するバージョンの簡単なサンプルを作成しました。

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

重要なのは、入力のタイプがボタンであり、送信ではないことです。私が使用したのは、 プロトタイプ IDで要素を取得するためのライブラリ。

他のヒント

クリックするたびにサーバーにリクエストを行っているようです。ページを読み込むたびにパスワード ボックスがリセットされるのは、ブラウザの典型的な動作です。

ASP.NETを使用しているとは言っていませんでしたが...

仕様により、ASP.NET はポストバック中に、モードがパスワードである TextBox コントロールの値をクリアします。次のコードを使用してサブクラスでこれを回避します。

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

ボタンでフォームを送信したくない場合は、タイプが「送信」ではなく「ボタン」であることを確認してください。たとえば、次のようなことを行うことができます。

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

HTML 内で次のようにします。

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

フォームが投稿されないようにするには、「送信」ではなく「ボタン」を使用する必要があります。

ブラウザがパスワード フィールドの値を設定しようとするスクリプトに何らかの問題があると仮定します。

button.value = password;

このコード行には実際の目的はありません。 password.value 値を読み取ってそれを使用している前の行には影響を受けません。 alert().

これはコードのより単純なバージョンである必要があります。

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

}

編集：実際、簡単なテストを行ったところ、Firefox は次のようなコードでパスワード フィールドの値を問題なく設定できました。 button.value = "blah". 。ということで、そういうことにはならないようですが…他の人が示唆したように、ASP.NETコードがポストバックを引き起こしているかどうかを確認します。

する必要はありません button.value = password; 値を読み取っても変更されないためです。なぜクリアされるのかわかりません。おそらく JavaScript ではパスワード フィールドの値の変更が許可されていないのかもしれません。

ハッ！

ここにある場合の答え:http://forums.asp.net/p/1067527/1548528.aspx

解決策が分かりました...修正は簡単な変更でした

  OnClientClick="myOnClick()"

に

  OnClientClick="return myOnClick()"

完全に修正されたコードは次のとおりです...

function myonclick（）{//他のアクションを実行します...false を返します。} タイトルのないページ

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top