Question

我有一个注册表单，要求用户输入他们的电子邮件和密码，两者都在两个单独的文本框中。我想提供一个用户可以单击的按钮，以便当用户单击按钮时，密码（被屏蔽的）将出现在弹出窗口中。

目前我的JavaScript代码如下：

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

问题是每次用户点击按钮时，都会在Firefox和IE中清除密码。我希望他们能够以明文形式查看密码，无需重新输入密码即可验证。

我的问题是：

为什么密码字段会在每次点击按钮时重置？
如果用户以明文形式看到他/她的密码，我该怎么做才能清除密码字段？

Answer 1

我认为浏览器在尝试设置密码字段值的脚本中存在一些问题：

button.value = password;

这行代码没有任何实际意义。 password.value在您之前读取值并在alert()中使用它的行中不会影响function toggleShowPassword() { var button = $get('PASSWORD_TEXTBOX_ID'); if (button) { alert(button.value); }。

这应该是您的代码的更简单版本：

button.value = "blah"

}

编辑：实际上我只是进行了快速测试，Firefox使用{{1}}等代码设置密码字段的值没有问题。所以看起来似乎不是这样......我会检查你的ASP.NET代码是否正在引起其他人建议的回发。

Answer 2

听起来你每次点击都要向服务器发出请求，每次加载页面时重置的密码框都是浏览器的典型行为。

Answer 3

您没有说您使用的是ASP.NET，但是......

按照设计，ASP.NET在回发期间清除ModeBox控件的值，该控件的Mode为Password。我在子类中使用以下代码解决此问题：

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

Answer 4

如果您不希望按钮提交表单，请确保它具有“按钮”类型而不是“提交”。例如，您可能会这样做：

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

Answer 5

在您的HTML中：

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

您需要使用“按钮”而不是“提交”来阻止您的表单发布。

Answer 6

我做了一个工作版的快速示例：

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

关键是输入是按钮类型而不是提交。我使用prototype库按ID检索元素。

Answer 7

您不需要执行button.value = password;，因为读取值不会改变它。我不确定为什么它被清除，也许JavaScript不允许修改密码字段值。

Answer 8

哈！

答案如果： http://forums.asp.net/p/1067527/1548528.aspx

我找到了解决方案......解决方案是简单的改变

  OnClientClick="myOnClick()"

到

  OnClientClick="return myOnClick()"

这是完全更正的代码......

function myOnClick（）{ //执行一些其他操作...... 返回false; } Untitled Page

在没有服务器交互的情况下捕获按钮点击javascript

8 个答案: