快应用如何实现密码明文和密文切换显示

2025-07-27 01:50:06

快应用如何实现密码明文和密文切换显示很多应用提供了账号登录、注册功能，在输入密码时，开发者为了安全性，当用户输入密码时，一般都显示……的密文。但是，这个体验也给用户造成了不便，用户不知道当前输入的字符是否是自己期望的，也无法知道当前输入到哪个字符。针对这个问题，开发者进行了优化&#x

快应用如何实现密码明文和密文切换显示

很多应用提供了账号登录、注册功能，在输入密码时，开发者为了安全性，当用户输入密码时，一般都显示……的密文。但是，这个体验也给用户造成了不便，用户不知道当前输入的字符是否是自己期望的，也无法知道当前输入到哪个字符。针对这个问题，开发者进行了优化，在输入框旁边提供了小图标，点击可切换显示明文和密文。快应用开发也是可以实现上述功能的。

解决方案

密码输入框使用input组件，input组件提供了多种type值，密文使用type类型为password，明文类型可使用text类型，type字段需要绑定动态变量。
在明文和密文切换时，需要显示设置光标位置在末尾，要不切换后光标会显示在开始位置。设置光标位置可以通过setSelectionRange()方法，方法中的start和end参数都设置成当前输入的文字长度。

示例代码如下：

1 2 4 5 6 7 8 9 10 11 12 1 14 15 16 17 18 19 20 21 22 2 24 25 26 27 28 29 0 1 2 4 5 6 7 8 9 40 41 42 4 44 45 46 47 48 49 50 51 52 5 54 55 56 57 58 59 60 61 62 6 64 65 66 67 68 69 70 71 72 7 74 75 <template> <div class=container> <stack class=input-item> <input class=input-text type={{inputtype}} id=inputpsdID placeholder=please enter password onchange=showChangePrompt></input> <image src=../Common/lock.png class=lock onclick=switchpassandshow></image> </stack> </div> </template> <style> .container { flex: 1; padding: 20px; flex-direction: column; align-items: center; } .input-item { margin-bottom: 80px; margin-top: 10px; margin-left: 16px; margin-right: 16px; align-items: center; justify-content: flex-end; } .lock{ width: 40px; height:40px; } .input-text { height: 80px; width: 100%; line-height: 80px; border-top-width: 1px; border-bottom-width: 1px; border-color: #999999; font-size: 0px; background-color: #ffffff; padding-right: 42px; } .input-text:focus { border-color: #f76160; } </style> <script> export default { data: { inputtype: password , lenth: 0 }, onInit() { this.$page.setTitleBar({ text: Switching between plaintext and ciphertext }); }, showChangePrompt(e) { this.lenth = e.value.length; cole.info(showChangePrompt this.lenth= this.lenth); }, switchpassandshow: function () { var com = this.$element( inputpsdID ); if (this.inputtype === password ) { this.inputtype = text ; } else { this.inputtype = password ; } com.setSelectionRange({ start: this.lenth, end: this.lenth}); } } </script>

上述代码实现了一个简易的密码明文和密文切换显示功能，点击右边的锁图标，可以切换显示明文和密文。效果如下图所示：


图1 密码明文显示	图2 密码密文显示

欲了解更多详情，请参见：

快应用input组件开发指导：

原文链接：developer.huawei/cumer/cn…

原作者：Mayism

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/shuma/857169.html

本站网友婴儿营养食谱	20分钟前发表
focus { border-color
本站网友南昌电影院	18分钟前发表
function () { var com = this.$element( inputpsdID ); if (this.inputtype === password ) { this.inputtype = text ; } else { this.inputtype = password ; } com.setSelectionRange({ start
本站网友山东癫痫病医院	27分钟前发表
在明文和密文切换时，需要显示设置光标位置在末尾，要不切换后光标会显示在开始位置
本站网友龚浩	8分钟前发表
end
本站网友 rdg	27分钟前发表
快应用开发也是可以实现上述功能的
本站网友 java交流	8分钟前发表
80px; border-top-width
本站网友机箱声音大	11分钟前发表
center; } .input-item { margin-bottom
本站网友天然植物染发剂	12分钟前发表
在明文和密文切换时，需要显示设置光标位置在末尾，要不切换后光标会显示在开始位置

快应用如何实现密码明文和密文切换显示