Question

使用该代码：

<!-- THIS IS WHERE IT ALL STARTS  -->


<!DOCTYPE html>
<html>
<head><title>Bank application</title>
<link rel="stylesheet"
      href="./css/styles.css"
      type="text/css"/>
</head>

<body>
<table class="title">
  <tr><th>Web Bank application</th></tr>
</table>

<br/>
<fieldset>
  <legend>Login Page - please enter your Username and Password</legend>
  <form action="loginPage"> 
    Username: <input type="text" name="username"><br>
    Password : <input type="text" name="password"><br>
    <input type="submit" value="Login">
  </form>
</fieldset>

<br/>
<br/>
<br/>
<br/>
<br/><br/><br/><br/><br/><br/>
</body></html>

用户输入他的用户名和密码 enter image description here

当我输入密码时，如何在屏幕上显示星号(*)，例如而不是显示myPassword，我想呈现**********，并保持字符串myPassword的实际字符？

谢谢

Answer 1

<input type="password" name="password">

Answer 2

将其更改为

<input type="PASSWORD" name="password">

<强>规格

Control types created with INPUT

Answer 3

使用密码时，请使用input type =“password”而不是text。格式是相同的，它只会告诉浏览器您希望用户在其中输入密码或其他敏感数据，这些数据应该从疲惫的眼睛中隐藏。因此浏览器不会显示输入的字符（或只是简单地显示），而是显示星号。

Username: <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>

Answer 4

@ eric-yin是正确的答案：带有input的{{1}}会掩盖密码。

不过，像@beefchimi一样，我需要：密码字段，可以：

在每个浏览器中显示星号
显示没有星号的最后一个字符

所以我写了这个jQuery插件：

type="password"

html可能是：

$.fn.betta_pw_fld = function(pwfld_sel, hiddenfld_sel) {

  // this is the form the plugin is called on
  $(this).each(function() {

    // the plugin accepts the css selector of the pw field (pwfld_sel)
    var pwfld = $(this).find(pwfld_sel);

    // on keyup, do the masking visually while filling a field for actual use
    pwfld.off('keyup.betta_pw_fld');
    pwfld.on('keyup.betta_pw_fld', function() {

      // if they haven't typed anything...just stop working
      var pchars = $(this).val();
      if (pchars == '') return;

      // we'll need the hidden characters too (for backspace and form submission)
      var hiddenfld = $(this).parents('form').find(hiddenfld_sel);
      var hchars = hiddenfld.val();

      // use these placeholders to build our password values
      // this one will have all asterisks except the last char
      var newval = '';

      // this one will have the actual pw in it, but we'll hide it
      var newhpw = '';

      // in this block, we're in a "keydown" event...
      // let's get the characters entered
      // loop over them and build newval and newhpw appropriately
      for (i=0; i<pchars.length - 1; i++) {
        if (pchars[i] == '*') {
          newhpw += hchars[i];
        } else {
          newhpw += pchars[i];
        }
        newval += '*';
      }

      // we want to see the last character...
      var lastchar = pchars[pchars.length - 1];
      if (lastchar == '*') {
        newval += hchars[pchars.length - 1];
        newhpw += hchars[pchars.length - 1];
      } else {
        newval += pchars[pchars.length - 1];
        newhpw += pchars[pchars.length - 1];
      }

      // set the updated (masked), visual pw field
      $(this).val(newval);

      // keep the pw hidden and ready for form submission in a hidden input
      hiddenfld.val(newhpw);
    });
  });
};

然后在<form id="myForm"> <label for="pw">Type password:</label><br> <input name="pw" class="stylishPassword" type="text"><br> <input class="hiddenPassword" type="hidden"> </form>或适当的时间，实例化该插件：

document.ready

访问Better Password Field jQuery Plugin Codepen，然后请记住对它有帮助的投票。

在index.html中输入密码时如何显示星号

4 个答案: