【一招配置，打开天眼】---密码框可见设置

收藏 · 2020-12-29 16:16 上传

近期做了一个系统，其中的密码框的变化还挺有意思，特拿来给大伙助兴，它的效果呢，可能很多地方都见过，是要在输入密码的时候，控制密码框的是否可见。
没想到在活字格中也能如巧妙的呈现它，如下图
image.png308135985.png

下面我们就来看它的诞生三部曲

（一）创建一个新页面，放置一个文本框（外观设置成显示密码字符，名称设为pwd），三个图片组件，其中一个图片组件紧挨文本框，并设置好提前准备的小眼睛图片，设计器里看这样的

image.png407202453.png

浏览器是这样的

（二）自定义密码框和图片的外边框，使他们看起来像一个整体，同时取消它们点击后的边框变色的特效。设置后，浏览器展示如下图
image.png163750914.png

（三）在密码框的右边图片上添加命令，一方面控制图片的切换，一方面控制密码框的字符是否加密展示（借助了javascript命令，修改文本类型），这样就做好了，效果如下图
image.png109277953.png

最后，附上这个小demo，[url=]密码框可见切换.fgcc[/url]

image.png660352172.png

litao · litao

实用的小技巧，谢谢分享！

小虾米666 · 小虾米666

非常实用，赞

夏雪冬阳 · 夏雪冬阳

会js就是牛

liwu430 · liwu430

很牛逼的样子

回复 · 137294886

非常实用，赞

Simon.hu · Simon.hu

xingrui · xingrui

大佬，666

qiu123 · qiu123

Joe.xu · Joe.xu

感谢对活字格支持

		自动登录	找回密码
密码			立即注册

[资源分享] 【一招配置，打开天眼】---密码框可见设置