Set default value of a password input so it can be read

前端未结

关注

 5  1972

I want to have a password field which says \"Password\" in it before a user enters their password (so they know what the field is)

I\'d rather just use Javascript, i

相关标签:

5条回答

甜味超标

2020-12-11 17:20
Add the following code to your javascript:
```
function makePasswordHidden() {
    document.getElementById("password").setAttribute("type", "password");
}
```
Change the input for the password to:
```
<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">
```
What this does it it makes the input element a 'password' and the value is updated so that it is hidden. If you would like for the value="Password" to be visible if the field is left empty then add the following javascript function:
```
function makePasswordShown() {
    document.getElementById("password").setAttrivute("type", "text");
}
```
And add the following to your password input:
```
onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

-上瘾入骨i

2020-12-11 17:26

A simple solution:

<input id="username" name="username" class="input_text" type="text" placeholder="Username"  />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

0 讨论(0)

谎友^

2020-12-11 17:31
I had another idea to deal with this problem and you will need no Javascript:
```
<input onclick="value=''; type='password';" name="password" type="text" value="Password" />
```
Or you can also do it like this:
```
<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />
```
I do not know the difference between this possibilities. Another thing you could change is to write instead of onclick=....... onfocus=.....

I don't know the difference here, too.

But I hope I could help you. PS: Sorry because of my bad English I'm German.
0 讨论(0)
发布评论:

提交评论
- 加载中...

伪装坚强ぢ

2020-12-11 17:32

If you're using HTML5 then you should use the placeholder attribute.

<input id="username" name="username" class="input_text" type="text" placeholder="Username"  />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

If you're using HTML4 you can create a fake password field.

<script type="text/javascript">
    function pwdFocus() {
        $('#fakepassword').hide();
        $('#password').show();
        $('#password').focus();
    }

    function pwdBlur() {
        if ($('#password').attr('value') == '') {
            $('#password').hide();
            $('#fakepassword').show();
        }
    }
</script>

<input id="username" name="username" class="input_text" type="text" v="Username"  />
<input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" />
<input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />

0 讨论(0)

南笙

2020-12-11 17:35

Change your password input to be a simple input type text. Then, with JavaScript (or JQuery) on focus event, change it to be a input type password.

Here is a little untested sample with plain JavaScript (no JQUERY):

<html>
<head>
   <script type="text/javascript">
      function makeItPassword()
      {
         document.getElementById("passcontainer")
            .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
         document.getElementById("password").focus();
      }
   </script>
</head>
<body>
   <form>
      <span id="passcontainer">
         <input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" />
      </span>
   </form>
</body>
</html>

0 讨论(0)