jQuery多个文本框值绑定单个文本框

时间：2016-06-14 10:52:06

标签： jquery 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>

        $(document).ready(function () {
            $('.textbox1').keyup(function () {
                $('.txtfkey').val($(this).val());
            });

            $('.textbox2').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $(this).val());
            });
            $('.textbox3').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $(this).val());
            });
            $('.textbox4').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $(this).val());
            });
            $('.textbox5').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $(this).val());
            });
            $('.textbox6').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $(this).val());
            });
            $('.textbox7').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $(this).val());
            });
            $('.textbox8').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $(this).val());
            });
            $('.textbox9').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $('.textbox8').val() + '-' + $(this).val());
            });
            $('.textbox10').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $('.textbox8').val() + '-' + $('.textbox9').val() + '-' + $(this).val());
            });
            $('.textbox11').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $('.textbox8').val() + '-' + $('.textbox9').val() + '-' + $('.textbox10').val() + '-' + $(this).val());
            });
            $('.textbox12').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $('.textbox8').val() + '-' + $('.textbox9').val() + '-' + $('.textbox10').val() + '-' + $('.textbox11').val() + '-' + $(this).val());
            });
        });
    </script>
    <style type="text/css">
        .textbox1 {width: 20px;margin-left: 50px;}

        .textbox2 {width: 20px;margin-left: 10px;}

        .textbox3 {width: 20px;margin-left: 10px;}

        .textbox4 {width: 20px;margin-left: 10px;}

        .textbox5 {width: 20px;margin-left: 10px;}

        .textbox6 {width: 20px;margin-left: 10px;}

        .textbox7 {width: 30px;margin-left: 10px;}

        .textbox8 {width: 50px;margin-left:100px;}

        .textbox9 {width: 50px;margin-left: 10px;}

        .textbox10 {width: 50px;margin-left: 10px;}

        .textbox11 {width: 50px;margin-left: 10px;}

        .textbox12 {width: 50px;margin-left: 10px;}

        .txtfkey {width: 250px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            KEY   :
            <input type='text' class='textbox1' />
            <input type='text' class='textbox2' />
            <input type='text' class='textbox3' />
            <input type='text' class='textbox4' />
            <input type='text' class='textbox5' />
            <input type='text' class='textbox6' />
            <input type='text' class='textbox7' />
            <br />
            <br />
            <input type='text' class='textbox8' /><input type='text' class='textbox9' /><input type='text' class='textbox10' /><input type='text' class='textbox11' /><br />
            <br />
        </div>
        <div>
            Formatted Key:   
            <input type='text' class='txtfkey' />
        </div>
    </form>
</body>
</html>

并且前6个文本框仅允许单个数字，接下来的6个文本框仅允许两个数字。

和所有需要的文本框

2 个答案:

答案 0 :(得分：0)

有一个名为maxlength的选项。您需要使用它来限制数字。

.textbox1 {
  width: 20px;
  margin-left: 50px;
}
.textbox2 {
  width: 20px;
  margin-left: 10px;
}
.textbox3 {
  width: 20px;
  margin-left: 10px;
}
.textbox4 {
  width: 20px;
  margin-left: 10px;
}
.textbox5 {
  width: 20px;
  margin-left: 10px;
}
.textbox6 {
  width: 20px;
  margin-left: 10px;
}
.textbox7 {
  width: 30px;
  margin-left: 10px;
}
.textbox8 {
  width: 50px;
  margin-left: 100px;
}
.textbox9 {
  width: 50px;
  margin-left: 10px;
}
.textbox10 {
  width: 50px;
  margin-left: 10px;
}
.textbox11 {
  width: 50px;
  margin-left: 10px;
}
.textbox12 {
  width: 50px;
  margin-left: 10px;
}
.txtfkey {
  width: 250px;
}
<form id="form1">
  <div>
    KEY :
    <input type='text' class='textbox1' maxlength="1" />
    <input type='text' class='textbox2' maxlength="1" />
    <input type='text' class='textbox3' maxlength="1" />
    <input type='text' class='textbox4' maxlength="1" />
    <input type='text' class='textbox5' maxlength="1" />
    <input type='text' class='textbox6' maxlength="1" />
    <input type='text' class='textbox7' maxlength="1" />
    <br />
    <br />
    <input type='text' class='textbox8' maxlength="2" />
    <input type='text' class='textbox9' maxlength="2" />
    <input type='text' class='textbox10' maxlength="2" />
    <input type='text' class='textbox11' maxlength="2" />
    <br />
    <br />
  </div>
  <div>
    Formatted Key:
    <input type='text' class='txtfkey' />
  </div>
</form>

答案 1 :(得分：0)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            $(".textbox1digit").prop("maxlength", "1");

            $(".textbox2digit").prop("maxlength", "2");

            $('.textbox1digit, .textbox2digit').keypress(function (event) {
                return isNumber(event);
            });

            $('.textbox1digit, .textbox2digit').keyup(function (event) {
                var allTextBoxes = $('.textbox1digit, .textbox2digit');
                $('.txtfkey').val('');
                $(allTextBoxes).each(function (index) {
                    var txtValue = $(this).val();
                    if (txtValue) {
                        var txtfkeyValue = $('.txtfkey').val();
                        if (txtfkeyValue) {
                            txtfkeyValue += '-';
                        }
                        $('.txtfkey').val(txtfkeyValue + txtValue);
                    }
                });
            });

            function isNumber(evt) {
                evt = (evt) ? evt : window.event;
                var charCode = (evt.which) ? evt.which : evt.keyCode;
                if (charCode > 31 && (charCode < 48 || charCode > 57)) {
                    return false;
                }
                return true;
            }
        });
    </script>
    <style>
        .textbox1digitstartmargin {
            margin-left: 50px !important;
        }

        .textbox2digitstartmargin {
            margin-left: 100px !important;
        }

        .textbox1digit {
            width: 20px;
            margin-left: 10px;
        }

        .textbox2digit {
            width: 50px;
            margin-left: 10px;
        }

        .txtfkey {
            width: 250px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            KEY   :
            <input type='text' class='textbox1digitstartmargin textbox1digit' />
            <input type='text' class='textbox1digit' />
            <input type='text' class='textbox1digit' />
            <input type='text' class='textbox1digit' />
            <input type='text' class='textbox1digit' />
            <input type='text' class='textbox1digit' />
            <input type='text' class='textbox1digit' />
            <br />
            <br />
            <input type='text' class='textbox2digitstartmargin textbox2digit' />
            <input type='text' class='textbox2digit' />
            <input type='text' class='textbox2digit' />
            <input type='text' class='textbox2digit' />
            <br />
            <br />
        </div>
        <div>
            Formatted Key:   
            <input type='text' class='txtfkey' />
        </div>
    </form>
</body>
</html>
相关问题
最新问题