今天做项目遇到一个手机号码和验证码一个数字对应一个input的需求,感觉这样子也蛮好看的,所以就写下。代码只兼容到IE9。

先看下最终效果:

好看的手机号码、验证码输入框

HTML代码

<div class="form"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> <input type="text" maxlength="1"> </div>

CSS代码

.form { text-align: center; position: absolute; top: 30%; width: 100%; } .form input { text-align: center; border: none; border-bottom: 0.53333vw solid #ddd; display: inline-block; width: 6.66667vw; height: 4.26667vw; background: none; color: #f54228; font-weight: bold; } .form input:focus { outline: none; }

JS(原生的)

var $inputs = document.getElementsByTagName('input'); var inputLen = $inputs.length; for (var i = 0; i < inputLen; i++) { $inputs[i].addEventListener("input", function(event){ var currentVal = this.value.trim(); //去除空格 if (currentVal.length==2) { var oldVal = this.getAttribute('data-val'); var firstVal = currentVal.substring(0,1); var secondVal = currentVal.substring(1,2); if (oldVal == firstVal) { currentVal = secondVal; }else{ currentVal = firstVal; } this.value = currentVal; } if (currentVal && this.nextElementSibling) { this.nextElementSibling.focus() } else if(inputLen == getVal().length) {//这里可以写一些验证 this.blur(); /*这里就可以写业务逻辑啦*/ console.log("最终结果的值: "+getVal()) } this.setAttribute("data-val", this.value) }) //监听键盘删除事件 $inputs[i].addEventListener('keyup', function(event){ if (event.keyCode == 8) { let $prev = this.previousElementSibling; if ($prev) { var val = $prev.value; $prev.value = '' $prev.focus(); $prev.value=val; } } }) } //获取输入的val function getVal() { var val = ''; for (var i = 0; i < inputLen; i++) { val = val + $inputs[i].value; } return val; }

JS(基于jquery)

$(function () { var $inputs = $("input"); var inputLen = $inputs.length; $inputs.bind("input", function (event) { //这里判断是为了覆盖输入 var currentVal = $.trim(this.value); if (currentVal.length==2) { var oldVal = $(this).data('val'); var firstVal = currentVal.substring(0,1); var secondVal = currentVal.substring(1,2); if (oldVal == firstVal) { currentVal = secondVal; }else{ currentVal = firstVal; } this.value = currentVal; } if (currentVal && $(this).next().length) { $(this).next().focus(); } else if(inputLen == getVal().length) {//这里可以写一些验证 $(this).blur(); /*这里就可以写业务逻辑啦*/ console.log("最终结果的值: "+getVal()) } //记录输入的值,方便下次覆盖输入 $(this).attr('data-val', currentVal); }); //处理删除的事件 $inputs.keyup(function (event) { if (event.keyCode == 8) { $prev = $(this).prev(); if ($prev) { //下面的处理是为了让input获取焦点的时候始终在最后面 var val = $prev.val(); $prev.val('') $(this).prev().focus(); $prev.val(val); } } }); //获取输入的val function getVal() { var val = ''; $("input").each(function (index, el) { val = val + $(el).val(); }) return val; } })

有什么问题可以在下方评论喔,逃~~~