input输入框模拟验证码输入效果

今天看到一个帖子，说到用input输入框模拟滴滴、摩拜等app验证码输入效果，提到了一个方案：

1、利用input来获得焦点，自动调用手机的数字键盘

2、实际将输入框用透明度隐藏

3、用label的for属性与input联动来显示输入的数字

于是照着这个思路实际操作了一番，还是发现了不少问题。

首先页面布局：

<div class="container">
    <h2>输入验证码：</h2>
    <div class="vcode" id='vertifycode'>
        <input type="tel" maxlength='6' ref='code' class='code' id='code'>
        <div class="labels">
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
        </div>
    </div>
</div>

样式：