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

【问题标题】：How to present asterisk when entering a password in index.html在 index.html 中输入密码时如何显示星号
【发布时间】：2012-08-09 09:03:32
【问题描述】：

使用该代码：

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

用户输入他的用户名和密码

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

谢谢

【问题讨论】：

标签： html passwords

【解决方案1】：

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

【讨论】：

至少在 Chrome 中，我得到的是“子弹”而不是“星号”。有什么方法可以更改用于隐藏输入值的字符？

【解决方案2】：

改成

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

规格

Control types created with INPUT

【讨论】：

【解决方案3】：

使用密码时，请使用输入 type="password" 而不是文本。格式是相同的，它只会告诉浏览器您希望您的用户在其中输入密码或其他敏感数据，这些数据应该隐藏在疲倦的眼睛之外。所以浏览器不会显示输入的字符（或只是简单地显示），而是会显示星号。

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

【讨论】：

【解决方案4】：

对，@eric-yin 的正确答案是：input 和 type="password" 掩盖了密码。

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

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

所以我写了这个 jQuery 插件：

$.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);
    });
  });
};

html 可能是：

<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，或者适当的时候，插件被实例化如下：

$('#myForm').betta_pw_fld('.stylishPassword', '.hiddenPassword')

访问Better Password Field jQuery Plugin Codepen，然后如果对你有帮助，请记得投票。

【讨论】：