Html 使用contenteditable div时模拟密码类型输入

我使用contenteditable div而不是输入元素，因为在输入框中设置样式时，它们更灵活。我只是想知道是否有一种方法可以使输入看起来像一个类型设置为password的输入元素，如下所示：

<input type='password'>

---

我希望这足够清楚。谢谢。

您必须了解mozilla和co.特定于浏览器的CSS设置。。但在webkit中，它看起来是这样的。还需要通过javascript为其添加按键处理程序

<style>
#password {
    -webkit-text-security: disc;
    height:20px; width:100px;
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    -webkit-user-select: text;
    cursor: auto;
}
</style>
<div id="password" contenteditable="true">yourpassword</div>
<script>
    //you could use javascript to do nice stuff
    var fakepassw=document.getElementById('password');
    //fakepassw.contentEditable="true"; 
    fakepassw.addEventListener('focus',function(e){ /*yourcode*/ },false);
    fakepassw.addEventListener('keyup',function(e){ console.log(e.keyCode) },false);
</script>

#密码{
-webkit文本安全：光盘；
高度：20px；宽度：100px；
-webkit外观：textfield；
填充：1px；
背景色：白色；
边框：2张插图；
-webkit用户选择：文本；
光标：自动；
}
你的密码
//你可以使用javascript来做一些好事情
var fakepassw=document.getElementById（'password'）；
//fakepassw.contentEditable=“true”；
addEventListener（'focus'，函数（e）{/*yourcode*/}，false）；
fakepassw.addEventListener（'keyup'，函数（e）{console.log（e.keyCode）}，false）；

但无论如何，密码字段只是与

element.innerHTML=“yourspassword”

和

element.innerText=“•••”

---

您也可以使用javascript来实现这一点，并在innerText中填充

“•”

我在尝试模拟密码输入时遇到了这个问题，但在另一个div上覆盖

•

对我来说不是一个选项，因为我也希望它在没有javascript的情况下工作。
还有

文本安全性：disc

，但目前还没有足够的支持

因此，我所做的是创建一种字体，其中所有拉丁字符（包括那些）看起来都像

•

这是我的电脑上的文件链接

当使用它时，只需将它添加到css文件中

@font-face {
  font-family: 'password';
  src: url('../font/password.woff2') format('woff2'),
       url('../font/password.woff') format('woff'),
       url('../font/password.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

然后要使用它，只需对元素应用

font-family:“password”

---

另外，如果Dropbox链接关闭，而您碰巧下载了它，请随时更换链接。否则，只需给这个答案一个注释

就可以删除密码记住，我将密码作为输入字段，并“模糊”键入的文本

它不如本机密码字段“安全”，因为选择键入的文本将显示为明文，但不会记住密码。这还取决于是否激活了Javascript

<input style="background-color: rgb(239, 179, 196); color: black; text-shadow: none;" name="password" size="10" maxlength="30" onfocus="this.value='';this.style.color='black'; this.style.textShadow='none';" onkeypress="this.style.color='transparent'; this.style.textShadow='1px 1px 6px green';" autocomplete="off" type="text">

---

这是我的解决方案。它并不完美（它只处理结尾处的附加/删除字符），但它非常简短：

html:

用于检索密码的JavaScript：

var password = document.getElementById ('my_id').input_pw;

---

@Ol Sen答案的编辑队列已满。下面是可运行的代码片段

注意JavaScript是完全可选的。对于支持

-webkit文本安全性的浏览器来说，这实际上是一个仅支持CSS的解决方案

MDN：


//您可以使用javascript做一些好事情
var fakepassw=document.getElementById（'password'）；
//fakepassw.contentEditable=“true”；
addEventListener（'focus'，函数（e）{/*yourcode*/}，false）；
fakepassw.addEventListener（'keyup'，函数（e）{
console.log（例如keyCode）
}，假）
#密码{
-webkit文本安全：光盘；
/*此行下面的所有样式都是可选的*/
高度：20px；
宽度：100px；
-webkit外观：textfield；
填充：1px；
背景色：白色；
边框：2张插图；
-webkit用户选择：文本；
光标：自动；
}
你的密码
谢谢你的回复，但我已经猜出来了。我只是让文本颜色与contenteditable div中的背景颜色匹配，并在可编辑div的顶部对齐一个新的div，我使用jQuery将每个keyup修改为•*totalCharacters。对Mozilla需要的css设置有什么想法吗？如何处理输入元素而不是div？绝对没有。这个解决方案甚至很危险，因为陌生人只需复制粘贴文本字段的内容，就可以轻松掌握真正的密码。所以这更像是一种安全的图形错觉。在源代码中，密码的情况很糟糕，甚至可以被注入的代码读取。任何陌生人或注入的代码都可以将
type=“password”
交换为
type=“text”
任何方式。如果密码持有元素没有
type
属性，则无法交换，您可以使用div元素。我们已经看到过将
input type=“password”
放在树中的解决方案，这些解决方案只是为了误导注入。使用
div
而不是
input
从一开始就是整个想法。实际上，在
input
元素中加入
type=“password”
是一个很好的补充！
function input_to_bullets (el) {
   if (! el.input_pw) {
      el.input_pw = '';
   }
   var val = el.value;
   var len = val.length;
   var chr = val.substr (len - 1);
   if (chr != "•") {
      el.input_pw += chr;
   } else {
      el.input_pw = el.input_pw.substr (0, len);
   }
   el.value = el.value.replace (/./g, "•");
}

var password = document.getElementById ('my_id').input_pw;