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

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

<输入类型='密码'>

我希望这已经足够清楚了.谢谢.

解决方案

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

<style>#密码 {-webkit-text-security:光盘；高度:20px；宽度:100 像素；-webkit-外观:文本字段；填充:1px；背景颜色:白色；边框:2px 插图；-webkit-user-select:文本；光标:自动；}</风格><div id="password" contenteditable="true">你的密码</div><脚本>//你可以使用 javascript 来做一些好的事情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);</脚本>

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

您也可以使用 javascript 执行此操作，并使用 "•"

填充 innerText

I'm using contenteditable divs instead of input elements, because they are more flexible when it comes to styling within the input box. I'm just wondering if there's a way to make the input look like an input element with its type set to password, like so:

<input type='password'>

I hope that is clear enough. Thanks.

解决方案

you will have to find out the browser specific CSS settings for mozilla and co.. but in webkit it looks like this. also you need to add the keypress handler via javascript for it.

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

but anyway, password fields are just combined elements with element.innerHTML="yourpassword" and element.innerText="•••••••"

you could do this with javascript too and fill innerText with "•"