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

发布时间：2020-12-14 18:35:45 所属栏目：资源来源：网络整理

导读：我正在使用contenteditable div而不是输入元素,因为它们在输入框中的样式时更灵活.我只是想知道是否有一种方法可以使输入看起来像一个输入元素,其类型设置为密码,如下所示： input type='password' 我希望这很清楚.谢谢. 解决方法你必须找到mozilla和co的浏

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

<input type='password'>

我希望这很清楚.谢谢.

解决方法

你必须找到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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!