html - 在标准表格单元格中隐藏密码

Question

我正在使用密码管理器，我需要在桌子上显示密码，有什么方法可以隐藏密码吗？我将放置一个按钮来切换密码的可见性。

Answer 1

您可以使用 Javascript 来切换密码，

例子：

 <!-- Password field -->
Password: <input type="password" value="FakePSW" id="myInput">

<!-- An element to toggle between password visibility -->
<input type="checkbox" onclick="myFunction()">Show Password

添加 JavaScript：

function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
 x.type = "text";
} else {
x.type = "password";
}
}

Answer 2

您可以使用一些 javascript - 本示例使用 jQuery javascript 库，因此您只需要包含一个指向该库的脚本标记（如下面的 HTML 所示）。

$('#passTD').mouseover(function(){
  $(this).css('color','blue');
});
$('#passTD').mouseleave(function(){
  $(this).css('color','transparent');
});

td{padding:5px;border:1px solid #ccc;}

#passTD{color:transparent;cursor:default;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
    <tr>
        <td>Password</td>
        <td><div id='passTD'>MyDogIsSam</div></td>
    </tr>
</table>

但请记住，使用 DevTools (F12) 的任何人都可以看到密码 - 例如，右键单击密码字段并选择Inspect element.

但是，如果您通过 显示密码mouseover，那么大概是允许该人看到密码，而您只是将其隐藏起来，以免有人随便偷看用户的肩膀。

为了提高安全性，另一种选择是将密码存储在 MySQL 数据库表中，然后使用 AJAX 请求密码。这有点高级，但是有很多 YouTube 教程介绍了如何使用 PHP 和 AJAX 创建登录系统。