Set default value of a password input so it can be

2020-02-07 01:11发布

站内文章 / JavaScript
5 0 0

问题:

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, importing jQuery for this alone seems wasteful, but I have no idea how to. The images explain quite clearly:

What it looks like:

What I want it to look like:

It's only a very simple website and the most basic of logins (has no validation etc)

Any ideas?

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

回答1:

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>


回答2:

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()" />


回答3:

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


回答4:

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';"


回答5:

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.



标签： javascript html forms
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~