hotoo / apassword Goto Github PK

原理

1. 让密码框处于不可见位置（有坑见下）
2. 密码框位置替换以 DOM 结构，构建密码控件用于显示。
3. 点击模拟的密码控件区域时，让密码框获得焦点，移动操作系统会唤起对应键盘。
4. 输入过程中，更新模拟的密码控件显示反馈。

坑

• iOS 下，密码框至于负座标，让其处于不可见区域，这个方案有严重的性能问题，连续快速输入时，模拟的密码框无法及时更新，呈现卡顿状态。
• 密码框使用 width:0;，height:0; 或 font-size:0; 隐藏时，输入框无法获得输入。（iOS, Android）
• iOS 需要使用 pattern="\d*" 激活数字键盘；
• Android 下需要使用 input[type=number]；
• 但是注意，此时 PC 端的 Chrome 浏览器中可以输入字母，但无法获得 value，除非全部输入数字。

其他方案的尝试

1. 通过设置 input[type=password] 密码框的 font-size 和 background-image 来控制每个密码字符占的可视宽度和分隔线。
   • 缺点：font-size 会影响密码框的高度，通过 height 控制高度，但是密码字符会显示到输入框以下。
   • 外层包一层容器，让密码框向上，可以达到居中的目的。但是整个控件不支持响应式显示。

我发现，按照你的doc里面的方法写：
new APassword("input.apassword")
.on("complete", function(value){

alert(value);

}).render();

会alert两遍value值。也就是执行了两次complete。我修改了spassword里面的那个"__event.on"为__event.once才能正常的alert一次。不知道这个算不算bug。还是我哪里写错了。

• complete 时激活提交按钮。
• incomplete 时禁用提交按钮。