HTML的input输完一个直接跳到下一个
说明:之前看到这样一个问题,输入红包密钥,领取红包。秘钥一共有4个块,每个块4个字节。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html的input输完一个直接跳到下一个</title> <style> .input input { display: inline-block;} .input{width: 580px;height:41px;line-height:41px;margin-right:20px;} .input input { border:1px solid #ccc; width: 100px; height: 40px; outline:none; font-size: 14px; font-weight: inherit; text-align: center; line-height: 40px; color: #000; background:#fff; margin-right:10px; margin-left:10px; font-family: "microsoft yahei"; } .input:first-child { margin-left:0; } </style> </head> <body> <div class="input" id="coupon"> <input type="tel" placeholder="红" name="sn1" maxlength="4" id="sn1"> - <!- -><input type="tel" placeholder="包" name="sn2" maxlength="4" id="sn2"> - <!- -><input type="tel" placeholder="密" name="sn3" maxlength="4" id="sn3"> - <!- -><input type="tel" placeholder="钥" name="sn4" maxlength="4" id="sn4"> </div> </body> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script> //默认第一个显示focus $(document).ready(function() { $("#sn1").focus(); //自动跳到下一个输入框 $("input[name^='sn']").each(function() { $(this).keyup(function(e) { e = window.event || e; var k = e.keyCode || e.which; if (k == 8) { //8是空格键 if ($(this).val().length < 1) { $(this).prev().focus(); $(this).prev().focus(function() { var obj = e.srcElement ? e.srcElement: e.target; if (obj.createTextRange) { //IE浏览器 var range = obj.createTextRange(); range.moveStart("character", 4); range.collapse(true); range.select(); } }); } } else { if ($(this).val().length > 3) { $(this).next().focus(); } } }) }); $("input[type='text'][id^='sn']").bind('keyup', function() { var len = $("#sn1").val().length + $("#sn2").val().length + $("#sn3").val().length + $("#sn4").val().length; if (len == 16) device_verify(); }); }); </script> </html>
效果图:
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/451
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!