五适合小白的小程序之密码框密码*号显示隐藏

Posted xintao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了五适合小白的小程序之密码框密码*号显示隐藏相关的知识,希望对你有一定的参考价值。

首先呢,还是先看看效果吧!

非可视密码下:

技术图片

可视密码下:

技术图片

到此呢,上正菜,为大家奉上。

wxml下:

1     <view class=‘sameBox‘>
2         <icon class=‘iconfont .icon-mima‘></icon>
3         <input bindinput=‘passWordInput‘ name="passWord" type="typeName" placeholder=‘请输入密码‘></input>
4         <view class=‘seePass‘ bindtap=‘showPass‘>
5           <icon class="iconfont .icon-yanjing" wx:if="passFlag == 1"></icon>
6           <icon class=‘iconfont .icon-bukeshi‘ wx:else></icon>
7         </view>
8       </view>

wxss下:

1 .sameBoxwidth: 100%;height: 50px;line-height: 50px;overflow: hidden;margin-top: 10px;
2 .sameBox .iconfont:nth-child(1)float: left;font-size: 1.5rem;color: #4768F3;padding-left: 10px;
3 .sameBox inputfloat: right;border-bottom: 1px solid #ccc;height: 97%;font-size: 0.85rem;width: 85%;color: #ccc;
4 .sameBox:nth-child(2)position: relative;
5 .seePassposition: absolute;top: 0;right: 0;width: 20px;height: 50px;padding-right: 20px;
6 .seePass .icon-yanjingfont-size: 0.1rem;padding: 0;

js下:

 

data: 
    typeName: ‘password‘, // 密码框的类型,用于显示密码时更改类型可看见输入的密码而非*号
    passFlag: 1,    // 密码第几次点击代表,用于显示不同的图标
    storePass: ‘‘,  // 暂存密码,用于显示密码
  ,
  showPass()     // 显示密码而非*号
    console.log(this.data.storePass)
    if (this.data.passFlag == 1) // 第一次点击
      this.setData( passFlag: 2, typeName : ‘text‘);
    else                        // 第二次点击
      this.setData( passFlag: 1, typeName : ‘password‘);
    
  ,
  passWordInput(e)     // 监听密码input框并把输入的密码在变量storePass下暂存起来,用于在显示密码操作展示
   console.log(e.detail.value)

    this.setData(
      storePass: e.detail.value,
      passWord: e.detail.value
    )
  ,

 

END:到这里呢,想要的效果就可以实现了,希望对各位有用把,不足之处望海涵。。。

 

以上是关于五适合小白的小程序之密码框密码*号显示隐藏的主要内容,如果未能解决你的问题,请参考以下文章

vue基于input实现密码的显示与隐藏功能

电脑如何显示密码框的小眼睛?

Axure RP9 如何借助动态面板实现密码输入框字符显示/隐藏切换

WordPress登录框显示/隐藏输入的密码

密码输入框的显示与隐藏

js实现密码框的点击眼睛的显示与隐藏