小程序实现6位数密码框

最新推荐文章于 2023-11-28 11:25:54 发布

chenrrrrr1994

最新推荐文章于 2023-11-28 11:25:54 发布

阅读量4.9k

点赞数 3

分类专栏： mini program

本文链接：https://blog.csdn.net/weixin_42795831/article/details/82968565

版权

本文记录了作者在学习微信小程序开发时，为面杀自动法官小程序设计的一个6位数密码输入框功能。由于原始的6个文本框切换输入方式导致用户体验不佳，作者采用了隐藏input结合6个禁用的展示文本框来实现。当用户点击任一展示文本框时，焦点转到隐藏input，其值同步到展示文本框，从而优化了交互体验。

摘要由CSDN通过智能技术生成

闲着蛋疼，于是学习开发微信小程序，打算写一个面杀自动法官得小程序，方便和朋友出去面杀，该案例不具备一定的严谨性，毕竟此时我才学了2天的小程序，瑟瑟发抖

需求如下：需要输入房间号，才能进入游戏房间，类似6尾数密码框
大致思路：最原本的想法是撸6个文本框，输入完1个自动focus下一个，发现特么的键盘弹起、收回、弹起、收回，体验非常糟糕，于是添加一个隐藏的input，其余6个文本框全部disabled，只负责展示，当用户习惯性的点击6个虚假的文本框中的任意一个，触发聚焦，聚焦到隐藏在暗处得文本框，再讲隐藏在暗处的文本框中的value渲染到6个假的文本框中，Done!!!

<view class='container'>
  <view class='render-wrap'>
    <block wx:for='{
     {dataSource}}' wx:key='this'>
      <input type='number' class='render-input' bindtap='onTapFocus' type=