如何解决如何将输入类型的值显示为已加密?可以使用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>