专栏首页前端开发随笔微信小程序密码输入框

微信小程序密码输入框

<view class='box'>
    <view class='row' bindtap='inputFocus'>
        <view class="{{index == active ? 'active' : '' }}" wx:for="{{Length}}" wx:key="index">
            <input type="number" value="{{entryList.length>=index+1?entryList[index]:''}}" disabled></input>
        </view>
    </view>
    <input type="number" class='entry' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="inputValue"></input>
</view>
.row {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.row view {
  width: 80rpx;
  height: 80rpx;
  border: 1px solid #f5f5f5;
  border-radius: 5rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row view input {
  width: 100%;
  height: 100%;
  text-align: center;
}

.active {
  border: 1px solid red !important;
}

.entry {
  width: 0;
  height: 0;
  opacity: 0;
}
Page({
    data: {
        isFocus: true,
        Length: 6,
        entryList: "",
        active: 0,
    },

    inputFocus() {
        this.setData({
            isFocus: true
        })
    },

    inputValue(e) {
        var value = e.detail.value;
        var list= e.detail.value.split('')
        this.setData({
            entryList: value,
            active: list.length
        })
    },
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序skeleton骨架屏

    文本添加class=“skeleton-rect”, 图片添加class=“skeleton-radius”

    任我行RQ
  • swiper.animate实现轮播展示动画效果

    任我行RQ
  • jQuery实现点击添加样式同胞移除样式

    任我行RQ
  • js判断input是否为空

    在进行注册时经常会遇到需要判断用户是否在文本框内输入了数据,那么就需要判断一下,一开始我感觉这是一个非常简单的问题。我的思路是获取input元素,判断他的元素是...

    无邪Z
  • jsp button onclick事件汇总

    week
  • 小蛇学python(15)pandas之数据合并

    这里,并没有指定要用哪个列进行连接,如果没有指定,就会默认将重叠列的列名当作连接键。这里连接的结果是按照笛卡儿积的逻辑实现的。在这个例子中表现不太明显,我们再看...

    用户2145057
  • JS-点和中括号

    xing.org1^
  • java所有的“锁”大总结,以后面试再也不怕遇到锁了

    理解 synchronized 原理之前,我们需要补充一下 java 对象的知识。

    全栈自学社区
  • 笔记软件构建记录

    以前工作一直使用的是自己的mac笔记本,现在突然要换成windows了,我所有的笔记都在mac上,都是本地的导致很难受,期间尝试过有道,印象发现这些商业软件我用...

    张琳兮
  • 笔记软件构建记录

    以前工作一直使用的是自己的mac笔记本,现在突然要换成windows了,我所有的笔记都在mac上,都是本地的导致很难受,期间尝试过有道,印象发现这些商业软件我用...

    张琳兮

扫码关注云+社区

领取腾讯云代金券