zoukankan      html  css  js  c++  java
  • 自动切换输入焦点的一个小"插件"


    <!
    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欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!
  • 相关阅读:
    [转]Magento刷新索引的几种方法
    [转]centos7 移动mysql5.7.19 数据存储位置
    [转]解决Magento批量导入带图片的商品的问题
    [转]【mysql监控】查看mysql库大小,表大小,索引大小
    [转]Centos系统中查看文件和文件夹大小
    [转]Magento 2.2 Developer Documentation
    [转]Magento2开发教程
    [转]Magento Configurable Product
    [转]论magento1和magento2的速度性能优化问题
    [转]本地 Windows 计算机密码登录 登录 腾讯云 Linux 实例
  • 原文地址:https://www.cnblogs.com/haley168/p/focus.html
Copyright © 2011-2022 走看看