收藏
回答

input 组件实现密码输入效果

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug input组件 客户端 6.6.7 2.4.4

- 当前 Bug 的表现(可附上截图)

业务需求是实现一个类似银行输入密码的界面,每次输入一个数字后续输入则放在其他的框中,用户可以点击对应数字修改该数字


1. 初步想法是做成4个input输入框,每次输入一个数字则切换焦点,但即时设置 confirm-hold ,且每次输入跳转输入框时键盘会闪烁,体验很差

2. 更换设置成 1 个input 控件,通过文字间距 分隔成4个数字,再画出对应的横线来达到效果, 但是 wxss 属性中设置 lettet-spacing 属性并无效果


请问input属性中怎么设置文字间距?或有其他更好替换方案么?


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


最后一次编辑于  03-15  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • 三世羽翾
    三世羽翾
    03-15

    很简单,画4个view框,只留下边框,中间填充4个text(黑点)作为输入密码后的显示,然后当点击其中一个的时候则可以由input聚焦(可以设置input的focus属性)触发输入法,而这个input看你是浮于这个密码框下还是设置个宽高为0的放页面做聚焦,还是放页面外都可以

    03-15
    赞同 1
    回复 1
    • 朔月之外
      朔月之外
      03-15

      emmm 感觉就用这种比较取巧的方法了

      03-15
      回复
  • 管凯旋
    管凯旋
    03-15

    这地方只是显示,而且如果真是密码的话键盘其实也可以自己写,模拟输入就好了

    03-15
    赞同
    回复
  • 吴奕群
    吴奕群
    03-16

    写4个view框吧,比较实在

    03-16
    赞同
    回复