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

2023-10-21前端开发问题
12

本文介绍了在使用 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*
The End

相关推荐

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

JavaScript(js)文件字符串中丢失"\"斜线的解决方法
问题描述: 在javascript中引用js代码,然后导致反斜杠丢失,发现字符串中的所有\信息丢失。比如在js中引用input type=text onkeyup=value=value.replace(/[^\d]/g,) ,结果导致正则表达式中的\丢失。 问题原因: 该字符串含有\,javascript对字符串进行了转...
2024-10-17 前端开发问题
437

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20 前端开发问题
5

如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?
How do I make a TextGeometry multiline? How do I put it inside a square so it wraps like html text does inside a div?(如何制作 TextGeometry 多线?如何将它放在一个正方形内,以便它像 html 文本一样包裹在 div 内?) - IT屋-程序员软件开发技术分享社...
2024-04-20 前端开发问题
6