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

Imitate a password-type input while using a contenteditable div(在使用 contenteditable div 时模仿密码类型的输入)
本文介绍了在使用 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*
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
how to remove this error quot;Response must contain an array at quot; . quot;.quot; while making dropdown(如何删除此错误quot;响应必须在quot;处包含数组。创建下拉菜单时(Q;))
Why is it necessary to use `document.createElementNS` when adding `svg` tags to an HTML document via JS?(为什么在通过JS为一个HTML文档添加`svg`标签时,需要使用`Document.createElementNS`?)
wkhtmltopdf print-media-type uses @media print ONLY and ignores the rest(Wkhtmltopdf print-media-type仅使用@media print,而忽略其余内容)
price depend on selection of radio input(价格取决于无线电输入的选择)
calculate price depend on selection without button(根据没有按钮的选择计算价格)