收藏
回答

input 组件实现密码输入效果

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

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

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


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

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


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


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


回答关注问题邀请回答
收藏

3 个回答

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

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

    2019-03-15
    有用 1
    回复 1
    • 2019-03-15

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

      2019-03-15
      回复
  • 吴奕群
    吴奕群
    2019-03-16

    写4个view框吧,比较实在

    2019-03-16
    有用
    回复
  • 管凯旋
    管凯旋
    2019-03-15

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

    2019-03-15
    有用
    回复
登录 后发表内容