1

使用该代码：

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

谢谢

4

4 回答 4

13

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

于 2012-08-13T06:29:23.240 回答
5

将其更改为

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

规格

于 2012-08-13T06:30:10.820 回答
2

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

Username: <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>
于 2012-08-13T06:49:43.100 回答
1

对，@eric-yin 有正确答案：An inputwithtype="password"掩码密码。

尽管如此，就像@beefchimi 一样，我需要：一个密码字段，它可以：

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

更好的密码字段 jQuery 插件示例

所以我写了这个 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')

访问更好的密码字段 jQuery 插件 Codepen，如果对您有帮助，请记得投票。

于 2019-12-18T00:49:52.750 回答