如何将输入类型的值显示为已加密？可以使用angular js实现吗？

问题描述

我有一个网站，用户可以在其中通过RFID阅读器在文本字段中扫描RFID卡，以验证卡。问题是，我不希望他们看到输入内容。他们应该看到********而不是实际的数字。

在不使用密码字段的情况下是可能的，因为密码字段会带来其他一些问题，例如不断要求更新网站的密码以及默认情况下带有*****。

不使用：

input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }

提交后的两个字段名称和值应显示如下：

名称：测试 值：***

解决方法

无法使用纯CSS和HTML并避免使用type="password"。我能想到的至少使其远程安全的唯一方法是使用filter: blur();属性。

body {
  font-size: 1rem;
}

.input-container {
  display: inline-block;
  border: solid 2px rgba(33,150,243,0.5);
  border-radius: 4px;
  overflow: hidden;
}

.input-container:focus-within {
  border-color: #2196f3;
}

input {
  height: 36px;
  font-size: inherit;
  line-height: 1;
  border: 0;
  filter: blur(4px);
}

<div class="input-container">
  <input type="text">
</div>

,

只需输入密码并关闭自动完成功能

<div class="input-container">
  <input type="password" autocomplete="off">
</div>