input 组件实现密码输入效果
发布于 6 年前 作者 nalu 2269 次浏览 来自 问答

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

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

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

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

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

  • 预期表现
  • 复现路径
  • 提供一个最简复现 Demo
3 回复

写4个view框吧,比较实在

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

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

回到顶部