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

Question

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

<input type='password'>

我希望这很清楚.谢谢.

Answer 1

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

所以我所做的就是在FontStruct上创建一个字体,其中所有拉丁字符(包括变音字符)看起来都像•.

这是我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'您的元素.

PS如果Dropbox链接已关闭并且您碰巧已将其下载,请随时更换链接.否则只需给出这个答案评论

Answer 2

你将不得不找出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 "•"