多个input连接在一起的时候如何实现输入一个数字跳入下一个

这个是页面内容，我分了12格子，作为一个12位的会员卡号的输入;其实就是12个input我把他们放在了一个div里面这样配上背景图，看着是一个大的输入框。

 1 <div id="AccountNumber" style="position: relative;top: 296px;left: 237px;width: 339px;height: 34px">
 2             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
 3                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
 4             </div>
 5             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
 6                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
 7             </div>
 8             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
 9                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
10             </div>
11             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
12                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
13             </div>
14             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
15                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
16             </div>
17             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
18                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
19             </div>
20             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
21                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
22             </div>
23             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
24                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
25             </div>
26             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
27                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
28             </div>
29             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
30                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
31             </div>
32             <div style="width: 8.33333333%;height: 28px;float:left;"><input maxlength="1" id="T"
33                                                                             style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
34             </div>
35             <div style="width: 8%;height: 28px;float:left;"><input maxlength="1" id="T"
36                                                                    style="height: 100%;width: 100%;outline: none;text-align: center;font-size: larger;background-color: #DDE4FF">
37             </div>
38         </div>

然后就是JS的书写了，请一定要注意，这个<script>是要放到body外面，<html>里面的。。切记，要不然会不工作。。。

<!--AccountNumber输入-->
<script>
    onload = function () {

        var txts = document.getElementById("AccountNumber").getElementsByTagName("input");
        for (var i = 0; i < txts.length; i++) {

            var t = txts[i];
            t.index = i;
            t.setAttribute("readonly", true);
            t.onkeyup = function () {

                if (event.keyCode == 8) {
                    this.value = "";
                    var behand = this.index - 1;
                    if (behand < 0) return;
                    txts[behand].removeAttribute("readonly");
                    txts[behand].focus();

                } else {
                    this.value = this.value.replace(/^(.).*$/, ‘$1‘);
                    var next = this.index + 1;
                    if (next > txts.length - 1) return;
                    txts[next].removeAttribute("readonly");
                    txts[next].focus();
                }

            }
        }
        txts[0].removeAttribute("readonly");
    }
</script>

时间： 2024-11-06 05:52:21

多个input连接在一起的时候如何实现输入一个数字跳入下一个的相关文章

js input框输入1位数字后自动跳到下一个input框聚焦

// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); for(var i = 0; i<txts.length;i++){ var t = txts[i]; t.index = i; t.setAttribute("readonly", true); t.onkeyup=function(){ this.value=this.value.

JDBC远程从一个MySql数据库中的一张表里面读出数据（这个数据库需要用SSH隧道连接，大约8W条数据），然后分别插入到另一个数据库中的两张表里

package com.eeepay.lzj.db; import java.sql.Connection; import java.sql.Date; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import com.jcraft.jsch.JSch; import com.jcraft.jsc

input提示字在有焦点消失或输入改变时消失

一:获取焦点时提示字消失 <input type="text" name="textfield" value="这里是提示内容" onclick="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" />

input框只能输入纯数字+格式化输入金额与银行卡JS代码

HTML页面代码示例: <div class="wrap"> <input type="text" id="bankCard" placeholder="输入银行卡号"> </div> <div class="wrap"> <input type="text" id="moneyNum" placeho

Jquery 实现input回车时跳转到下一个input元素

/** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INPUT 元素列表] * @return {[type]} [description] */ function keydown_to_tab($input){ if(!$input) $input = $('input:text:not(:disabled)'); $input.bind("keydown&

如何用jquery获取<input id="test" name="test" type="text"/>中输入的值？

如何用jquery获取<input id="test" name="test" type="text"/>中输入的值?$(" #test ").val()$(" input[ name='test' ] ").val()$(" input[ type='text' ] ").val()$(" input[ type='text' ]").attr(&quo

一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用js来append操作,亲测了都不管用.除非把autocomplete=“off”关了,但这就不符合需求了如图网上说的改变-webkit-autofill的阴影背景是可以去除黄色背景的,但是图片依旧被覆盖了. input:-webkit-autofill{ box-shadow:0 0 0px

[LeetCode] Two Sum IV - Input is a BST 两数之和之四 - 输入是二叉搜索树

Given a Binary Search Tree and a target number, return true if there exist two elements in the BST such that their sum is equal to the given target. Example 1: Input: 5 / 3 6 / \ 2 4 7 Target = 9 Output: True Example 2: Input: 5 / 3 6 / \ 2 4 7 Targe

input的类型为number，限制输入的数字位数

<input type="text" maxlength="5" /> 效果ok,当 <input type="number" maxlength="5" />时maxlength失效,长度可以无限输入. 解放方案: <input type="number" oninput="if(value.length>5)value=value.slice(0,5