请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Joe.xu 讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2020-12-29 16:22  /   查看:3317  /  回复:9
近期做了一个系统,其中的密码框的变化还挺有意思,特拿来给大伙助兴,它的效果呢,可能很多地方都见过,是要在输入密码的时候,控制密码框的是否可见。
没想到在活字格中也能如巧妙的呈现它,如下图
image.png308135985.png image.png716486816.png

下面我们就来看它的诞生三部曲
(一)创建一个新页面,放置一个文本框(外观设置成显示密码字符,名称设为pwd),三个图片组件,其中一个图片组件紧挨文本框,并设置好提前准备的小眼睛图片,设计器里看这样的

image.png407202453.png

浏览器是这样的

image.png441161193.png
(二)自定义密码框和图片的外边框,使他们看起来像一个整体,同时取消它们点击后的边框变色的特效。设置后,浏览器展示如下图
image.png163750914.png
(三)在密码框的右边图片上添加命令,一方面控制图片的切换,一方面控制密码框的字符是否加密展示(借助了javascript命令,修改文本类型),这样就做好了,效果如下图
image.png109277953.png     image.png234870909.png
image.png292425536.png

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


image.png660352172.png


image.png217619628.png

密码框可见切换.fgcc

57.16 KB, 下载次数: 110

9 个回复

倒序浏览
litao
中级会员   /  发表于:2020-12-30 19:53:42
沙发
实用的小技巧,谢谢分享!
回复 使用道具 举报
小虾米666
高级会员   /  发表于:2020-12-30 22:12:15
板凳
非常实用,赞
回复 使用道具 举报
夏雪冬阳
银牌会员   /  发表于:2020-12-31 13:35:55
地板
会js就是牛
回复 使用道具 举报
liwu430
注册会员   /  发表于:2020-12-31 14:53:15
5#
很牛逼的样子
回复 使用道具 举报
137294886
金牌服务用户   /  发表于:2021-3-14 22:40:01
6#
非常实用,赞
回复 使用道具 举报
Simon.hu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2021-3-20 12:12:44
7#
回复 使用道具 举报
xingrui
中级会员   /  发表于:2021-3-25 13:42:26
8#
大佬,666
回复 使用道具 举报
qiu123
中级会员   /  发表于:2021-4-11 17:50:06
10#
回复 使用道具 举报
Joe.xu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2021-4-12 09:42:19
11#
感谢对活字格支持
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部