这个验证码输入应用场景非常的多，看起来很简单的，但是做起来还是有一些坑。

首先的想法就是6个input框，每输入一个数字之后，切换到下一个input，即切换focus，如果输入很快的话，会导致切换不过来

有卡顿的感觉，pass掉，所以最后使用一个input来接受输入最好，通过样式来切割成6个框，感觉这种也不好控制也就pass掉；

最后的想法是放6个input框，但是全都是disabled的，然后让一个隐藏的input来接受输入，这个input添加change事件，让接受到的值分割后在赋到其他6个disabled框中显示出来。

先看看效果：

效果图

Html code如下：

js code：

function inputNumOnly(e) {

if (!(event.keyCode == 46) && !(event.keyCode == 8) && !(event.keyCode == 37) && !(event.keyCode == 39)) {

if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) {

event.returnValue = false;

}

if (e.value && e.value.length >= 6) {

event.returnValue = false;

}

}

}

function keyupHandler(e) {

e.value = e.value.substr(0, 6);

code = e.value

for (var i = 0; i < 6; i++) {

if (i < code.length) {

document.getElementById("tb" + i).value = code[i];

} else {

document.getElementById("tb" + i).value = "";

}

}

if (code.length === 6) {

document.getElementById("btn-submit-form").style.display = "block";

}

}

function focusHandler(e) {

document.getElementById("hdcode").focus();

}

css code 只截取了部分:

/* page-container */

.page-container {

position: absolute;

bottom: 0;

top: 0;

left: 50%;

margin-left: -150px;

font-family: "Seravek Light";

font-size: 16px;

font-weight: normal;

line-height: 1.4;

color: #eee;

overflow: auto;

border-radius: 3px;

padding: 50px 0;

height: auto;

width: 100%;

max-width: 300px;

overflow-y: hidden;

background: linear-gradient(#00815a, #008120);

box-shadow: 0 2px 0 rgba(175, 175, 175, 0.12);

}

.pd-container {

padding: 10px 30px;

}

.bg-green-lighter {

background: linear-gradient(#339a7b, #339a3d);

}

@media only screen and (max-width: 600px) {

.page-container {

position: absolute;

bottom: 0;

top: 0;

left: 0;

margin: 0;

padding: 20px 0;

border: none;

box-shadow: none;

width: 100%;

max-width: 100%;

}

}

@media only screen and (min-height: 736px) {

.page-container {

padding: 120px 0;

}

}

/* checked-codes */

.checked-codes {

max-width: 300px;

margin: 0 auto;

}

.checked-codes .flex {

justify-content: space-between;

}

.checked-codes a {

float: right;

font-size: 13px;

color: #000000;

text-decoration: underline;

line-height: 13px

}

.checked-codes input {

box-sizing: border-box;

height: 40px;

max-width: 40px;

border: solid 1px #eee;

border-radius: 4px;

margin: 0 2px;

flex: 1;

font-size: 18px;

text-align: center;

background-color: transparent;

color: #eee;

}

.con-message {

padding-top: 100px;

padding-bottom: 50px;

}

button {

padding: 6px 0;

margin: 10px 0;

}

.code-tip {

font-size: 14px;

}

.code-container:active {

-moz-box-shadow: 0px 7px 20px #333333;

-webkit-box-shadow: 0px 7px 20px #333333;

box-shadow: 0px 7px 20px #333333;

}

.flex {

display: flex;

}

END!!!