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

Question

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

<input type='password'>

我希望这很清楚。谢谢。

Answer 1

你将不得不找出mozilla和co ..的浏览器特定的CSS设置，但在webkit中它看起来像这样。你还需要通过javascript添加keypress处理程序。

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

但无论如何，密码字段只是与element.innerHTML="yourpassword"和element.innerText="•••••••"组合在一起的元素

你也可以用javascript做这个，并用"•"填充innerText

Answer 2

当我试图模仿密码输入时，我遇到了这个问题，但是用•s覆盖另一个div对我来说不是一个选项，因为我希望它在没有JavaScript的情况下工作。 然后是text-security: disc，但是到目前为止还没有足够的支持。

所以我所做的是在FontStruct上创建一个字体，其中所有拉丁字符（包括diacritic字符）看起来像•。

这是我Dropbox上文件的链接。

使用它时，只需在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链接已关闭并且您碰巧已将其下载，请随时替换该链接。否则只需给出这个答案评论

Answer 3

为了摆脱密码记住，我将密码视为输入字段，并“模糊”键入的文本。

它比本机密码字段更“安全”，因为选择键入的文本会将其显示为明文，但不会记住密码。它还取决于激活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">

Answer 4

这是我的解决方案。它并不完美（它只在最后处理额外/删除的字符），但它很短：

HTML：

<input id="my_id" type="text" oninput="input_to_bullets (this)" onfocus="this.value = ''; this.input_pw = '';" autocomplete="off" />

JavaScript的：

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, "•");
}

用于检索密码的JavaScript：

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