Question

我希望在用户输入密码之前有一个密码字段，其中显示“密码”（所以他们知道该字段是什么）

我宁愿只使用Javascript，单独导入jQuery似乎很浪费，但我不知道怎么做。图像说得非常清楚：

它的样子：

enter image description here

我希望它看起来像：

enter image description here

这只是一个非常简单的网站和最基本的登录（没有验证等）

有什么想法吗？

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

Answer 1

如果您使用的是HTML5，则应使用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" />

如果您使用的是HTML4，则可以创建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()" />

Answer 2

将您的password输入更改为简单输入类型text。然后，使用焦点事件的JavaScript（或JQuery），将其更改为输入类型password。

这是一个使用纯JavaScript（没有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>

Answer 3

一个简单的解决方案：

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

Answer 4

将以下代码添加到您的javascript：

function makePasswordHidden() {
    document.getElementById("password").setAttribute("type", "password");
}

将密码输入更改为：

<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">

这样做会使输入元素成为密码＆＃39;并更新该值以使其隐藏。如果你想要值=＆＃34;密码＆＃34;如果字段留空则可见，然后添加以下javascript函数：

function makePasswordShown() {
    document.getElementById("password").setAttrivute("type", "text");
}

并在密码输入中添加以下内容：

onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"

Answer 5

我有另一个想法来处理这个问题，你将不需要Javascript：

<input onclick="value=''; type='password';" name="password" type="text" value="Password" />

或者您也可以这样做：

<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />

我不知道这种可能性之间的区别。您可以更改的另一件事是编写而不是onclick=....... onfocus=.....

我也不知道这里的区别。

但我希望我能帮助你。 PS：很抱歉，因为我的英语不好，我是德国人。

设置密码输入的默认值，以便可以读取

5 个答案: