在使用contenteditable div时模仿密码输入 [英] Imitate a password-type input while using a contenteditable div

问题描述

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

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.

推荐答案

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

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>

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

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

你也可以用javascript来做到这一点，并用填充innerText

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

这篇关于在使用contenteditable div时模仿密码输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！