js仿密码格子

思路1：盒子数量=密码的长度。盒子可用li, div, span等等充当，普遍用li元素。用li标签举例：

1. 将input和li标签放于同一个ul下。
2. 设置input样式，宽高占满父盒子，这样点击ul实际是触发input事件（或者用label，for=id的方式）。input设置为透明，监听oninput事件。
   注意：onchange只有失去焦点才会触发，oninput可以即时触发
3. oninput事件中，限定可输入长度 ，设置maxlength或js限定value的长度。
   注意：input的type为number时，maxlength属性是无效的。
4. input输入时，把input的每个字符分别放进对应li中；或者根据索引设置li的样式，比如小黑点样式。
5. input删除时，可以对比已有值的li个数，做删除；或者直接把所有li的数据清空，重新赋值。
   (PS:以上为原生js，若用Vue的话，会比较简单)

<ul class="pwd-box">
	<input type="text" style="opacity:0;" oninput="test(this);" maxlength="6>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

思路2（不推荐）：底部直接一个长盒子，编写样式将盒子隔成n个小盒子（或直接写n个小盒子），使用input覆盖在上面，设置input的letter-spacing，使每个字符刚好在底部的每个盒子上。方法比较low，而且不好做兼容，不同系统的手机上样式需要单独调整。