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

I've got a sign up form that requires the user to enter their email and password, both are in two separate text boxes. I want to provide a button that the user can click so that the password (which is masked) will appear in a popup when the user clicks the button.

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

Currently my JavaScript code for this is as follows:

目前我的JavaScript代码如下:

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

The problem is that every time the user clicks the button, the password is cleared in both Firefox and IE. I want them to be able to see their password in clear text to verify without having to retype their password.

问题是每次用户单击该按钮时,都会在Firefox和IE中清除密码。我希望他们能够以明文形式查看他们的密码,以便在不必重新输入密码的情况下进行验证。

My questions are:

我的问题是:

Why does the password field keep getting reset with each button click?

为什么密码字段会随着每次点击按钮而重置?
How can I make it so the password field is NOT cleared once the user has seen his/her password in clear text?

如果用户以明文形式看到他/她的密码,我怎么能这样做才能清除密码字段?

8 个解决方案

#1

I did a quick example up of a working version:

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

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

The key is that the input is of type button and not submit. I used the prototype library for retrieving the element by ID.

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

#2

You didn't say you were using ASP.NET, but...

你没有说你使用的是ASP.NET,但......

By design, ASP.NET clears during postback the value of TextBox controls whose Mode is Password. I work around this in a subclass with the following code:

按照设计,ASP.NET在回发期间清除模式为Password的TextBox控件的值。我在子类中使用以下代码解决此问题:

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

#3

It sounds that you're doing a request to the server on each click, the password box being reset in each page load is typical behavior of the browsers.

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

#4

If you don't want the button to submit the form, then be sure it has type 'button' rather than 'submit'. For example, you might do something like this:

如果您不希望按钮提交表单,请确保它具有“按钮”类型而不是“提交”。例如,您可能会执行以下操作:

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

#5

In your HTML:

在您的HTML中:

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

You need to use "button" rather than "submit" to prevent your form from posting.

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

#6

I would assume that the browser has some issue with the script attempting to set the value of a password field:

我会假设浏览器在尝试设置密码字段值的脚本中存在一些问题:

button.value = password;

This line of code has no real purpose. password.value is not affected in the previous lines where you are reading the value and using it in the alert().

这行代码没有任何实际意义。在您读取值并在alert()中使用它的前几行中,password.value不受影响。

This should be a simpler version of your code:

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

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

}

edit: actually I just did a quick test, and Firefox has no problem setting the password field's value with code such as button.value = "blah". So it doesn't seem like this would be the case ... I would check if your ASP.NET code is causing a postback as others have suggested.

编辑:实际上我只是做了一个快速测试,Firefox没有问题设置密码字段的值与代码,如button.value =“blah”。所以看起来似乎并非如此......我会检查你的ASP.NET代码是否正在引发其他人建议的回发。

#7

You do not need to do button.value = password; since reading the value does not change it. I'm not sure why it's being cleared, maybe JavaScript does not allow password field values to be modified.

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

#8

hah!

the answer if here: http://forums.asp.net/p/1067527/1548528.aspx

答案如果在这里:http://forums.asp.net/p/1067527/1548528.aspx

I figured out the solution... the fix was simple change

我想出了解决方案......修复很简单

  OnClientClick="myOnClick()"

  OnClientClick="return myOnClick()"

Here's the fully corrected code...

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

function myOnClick() { //perform some other actions... return false; } Untitled Page

function myOnClick(){//执行一些其他操作...返回false;无标题页面

#1