11
收藏
评论

如何实现一个6位数的密码输入框

如何实现一个简单的6位数密码输入框

背景:

因为公司业务调整需要做用户支付这一块
开发者需要在小程序上实现一个简单的6位数密码输入框

首先想下如何实现该效果:

1.使用input覆盖在框上面,设置letter-spacing达到数字之间间距的效果,实现时发现在input组件上使用letter-spacing无效果

2.循环六个view模拟的框,光标使用动画模拟,一个隐藏的input,点击view框时触发input的Focus属性弹起键盘,同时模拟的光标展示出来,输入值后,input的value长度发生变化,设置光标位置以及模拟的密码小黑圆点

好了,废话不多数,咱们直接上手。

wxml
<view class='container'>
  <!-- 模拟输入框 -->
  <view class='pay-box {{focusType ? "focus-border" : ""}}' bindtap="handleFocus" style='width: 604rpx;height: 98rpx'>
    <block wx:for="{{boxList}}" wx:key="{{index}}">
      <view class='password-box {{index === 0 ? "b-l-n":""}}'>
        <view wx:if="{{(dataLength === item - 1)&& focusType}}" class="cursor"></view>
        <view wx:if="{{dataLength >= item}}" class="input-black-dot"></view>
      </view>
    </block>
  </view>
  <!-- 隐藏input框 -->
  <input value="{{input_value}}" focus="{{isFocus}}" maxlength="6" type="number" class='hidden-input' bindinput="handleSetData" bindfocus="handleUseFocus" bindblur="handleUseFocus" />
</view>
wxss
/* 第一个格子输入框 */
.container .b-l-n {
  border-left: none;
}

.pay-box {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  border-left: 1px solid #cfd4d3;
}

/* 支付密码框聚焦的时候 */

.focus-border {
  border-color: #0c8;
}

/* 单个格式样式(聚焦的时候) */
.password-box {
  flex: 1;
  border: 1px solid #0c8;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 模拟光标 */

.cursor {
  width: 2rpx;
  height: 36rpx;
  background-color: #0c8;
  animation: focus 1.2s infinite;
}

/* 光标动画 */

@keyframes focus {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* 模拟输入的password的黑点 */

.input-black-dot {
  width: 20rpx;
  height: 20rpx;
  background-color: #000;
  border-radius: 50%;
}

/* 输入框 */

.hidden-input {
  margin-top: 200rpx;
  position: relative;
}

JS
Component({
  data: {
    //输入框聚焦状态
    isFocus: false,
    //输入框聚焦样式 是否自动获取焦点
    focusType: true,
    valueData: '', //输入的值
    dataLength: '',
    boxList: [1, 2, 3, 4, 5, 6]
  },
  // 组件属性
  properties: {

  },
  // 组件方法
  methods: {
    // 获得焦点时
    handleUseFocus() {
      this.setData({
        focusType: true
      })
    },

    // 失去焦点时
    handleUseBlur() {
      this.setData({
        focusType: false
      })
    },

    // 点击6个框聚焦
    handleFocus() {
      this.setData({
        isFocus: true
      })
    },

    // 获取输入框的值
    handleSetData(e) {
      // 更新数据
      this.setData({
        dataLength: e.detail.value.length,
        valueData: e.detail.value
      })
      // 当输入框的值等于6时(发起支付等...)
      if (e.detail.value.length === 6) {
        // 通知用户输入数字达到6位数可以发送接口校验密码是否正确
        this.triggerEvent('initData', e.detail.value)
      }
    }
  }
})
实现方式很简单,有点小问题,还有一些后续准备做的优化点,等完善后上线后再来修改一波。

最后附上代码片段:

https://developers.weixin.qq.com/s/8CtRqJmT7W8k

最后一次编辑于  05-30  (未经腾讯允许,不得转载)
复制链接赞 11收藏投诉评论

6 个评论

  • 兰昊
    兰昊
    05-30

    ..?

    05-30
    赞同
    回复
  • 等风来,随风去
    等风来,随风去
    06-01

    Tp5.1+VUE+Layui+ivew 开发、全新ui、免费开源下载完美商城源码及小程序和公众号打通版免费项目案例:http://github.crmeb.net/u/liaofei

    06-01
    赞同
    回复
  • Pᴇᴘsɪ
    Pᴇᴘsɪ
    06-06

    6个input  设一个focus变量 通过变量控制焦点切换input可行么 感觉这么做简单

    06-06
    赞同
    回复 1
    • 仙ღ₅₂₀¹³¹⁴
      仙ღ₅₂₀¹³¹⁴
      06-06

      你可以操作看看。我觉得input的获取焦点的问题存在的,在某些机型上有点问题。你可以写个input的操作看下。。看效果吧。都可以用

      06-06
      赞同
      回复
  • 吻入心扉
    吻入心扉
    06-28

    6个label的for 指向input 的id 就行了

    06-28
    赞同
    回复
  • 陶橪
    陶橪
    07-09

    关闭清除输入框的值没用  下次进来还在

    07-09
    赞同
    回复