自动切换输入焦点的一个小"插件"
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> form{ margin-bottom:10px; } form#inputs>input,form#inputs2>input,form#inputs3>input{ width:40px; height:40px; border-right-color: #FD7012; border-style: solid; border-top-width: 2px; border-bottom-width: 2px; border-left:none; font-size: 30px; text-align: center; // outline: none; } form#inputs>input:first-child,form#inputs2>input:first-child,form#inputs3>input:first-child{ border-left: 2px solid #000; } form#inputs>input:last-child,form#inputs2>input:last-child,form#inputs3>input:last-child{ border-right: 2px solid #000; } </style> <title></title> </head> <body> <hgroup> <h1>自动切换输入焦点的一个小插件</h1><h2>haley编写</h2> </hgroup> <form id="inputs"></form> <form id="inputs2"></form> <form id="inputs3"></form> <div> <h2>使用说明:</h2> <ol> <li>数量可以自由定制</li> <li>输入框的大小、边框颜色、边框线型可通过修改css样式改变</li> <li>页面中是输入组可以有多个</li> <li>haley编写</li> </ol> </div> <script> function inputsAutoFocus(config) {//页面id,输入框的数量 var inps=document.getElementById(config.id); function tabForward(e) { e = e || window.event; var target = e.target || e.srcElement; if (target.value.length === target.maxLength) { var form = target.form; for (var i = 0; i <config.num; i++) { if (form.elements[i] === target) { if (form.elements[i++]) { if(i<config.num)form.elements[i++].focus(); } break; } } } } function addEvents() { for (var i = 0; i < config.num; i++) { inps.children[i].addEventListener("keyup", tabForward, false); } } function appInp(){ var inp = document.createElement("input"); inp.setAttribute("type", "text"); inp.setAttribute("maxlength", "1"); inp.style.top = "20px";//js设置样式 inps.appendChild(inp); } for(var i=0;i<config.num;i++){ appInp(); } addEvents(); }; inputsAutoFocus({id:'inputs',num:11}); inputsAutoFocus({id:'inputs2',num:4}); inputsAutoFocus({id:'inputs3',num:6}); </script> </body> </html>
haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!