Question

在ASP.NET MVC 2表单上，我要求用户插入16位银行帐号。用户对于bankaccount编号的每个数字有16个不同的文本框。用户必须在另外16个文本框中重新输入相同的银行帐号。如果之前输入的银行帐号与重新输入的银行帐号相匹配，那么我想显示错误消息或提醒。

我有16个文本框只有一个数字值..我想传递所有这些值并创建一个字符串..如何使用Jquery做到这一点？我用javascript尝试了同样的事情，但唯一的问题是它没有第一次添加我的第一个文本框值，但只有当我继续在我的其他2个文本框中键入时才将其添加到字符串中，之后只有我的第一个文本框值被添加到字符串......其实我有17个文本框......我试图将16个文本框的值存储到第17个具有隐藏属性的文本框中？我需要一个Jquery代码，因为我认为javascript不是一个很好的选择......

编辑： - 我还有另一项要求是提交银行帐号，但更新呢？到目前为止，我已经这样做了，它不工作..调试器找不到class =“ac”或任何东西的keyUp事件。

     <div class="alert-date-field">

        <div class="alert-labelfield">
            <%: Html.Label("Account Number") %>
        </div>
    <div  style=" float:right; width:495px;" >
     <input type="text" maxlength="1" size="10px" class="ac" id="ac1"    />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac2"   />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac3"    />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac4"   />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac5"  />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac6"    />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac7"   />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac8"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac9"   />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac10"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac11"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac12"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac13"  />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac14"   />
   <input type="text" maxlength="1" size="10px" class="ac" id="ac15"   />
    <input type="text" maxlength="1" size="10px" class="ac" id="ac16"   />
  <%: Html.TextBoxFor(model => model.EFTUpdateAccountDescriptor.BankAccountNo, new { ID = "bankaccountnumber", maxlength = "16", Style = " width : 120px;" })%>
                        </div>
                     </div>
    <script type="text/javascript">
 $(document).ready(function () {
     document.getElementById('ReABNumber').value = "";
     document.getElementById('RfinalAcntNumber').value = "";
     //  document.getElementById('').value;
    // debugger;
     var jqAcnt = document.getElementById('bankaccountnumber').value;
     var jqAbNum = document.getElementById('finalABNumber').value;
     var inpAcnt = jqAcnt;
     var inpAcntArray = new Array(
                     (inpAcnt.charAt(0)),
        (inpAcnt.charAt(1)),
        (inpAcnt.charAt(2)),
        (inpAcnt.charAt(3)),
        (inpAcnt.charAt(4)),
        (inpAcnt.charAt(5)),
        (inpAcnt.charAt(6)),
        (inpAcnt.charAt(7)),
         (inpAcnt.charAt(8)),
         (inpAcnt.charAt(9)),
         (inpAcnt.charAt(10)),
         (inpAcnt.charAt(11)),
         (inpAcnt.charAt(12)),
         (inpAcnt.charAt(13)),
         (inpAcnt.charAt(14)),
         (inpAcnt.charAt(15))
     );
     document.getElementById('ac1').value = inpAcntArray.slice(0, 1);
     document.getElementById('ac2').value = inpAcntArray.slice(1, 2);
     document.getElementById('ac3').value = inpAcntArray.slice(2, 3);
     document.getElementById('ac4').value = inpAcntArray.slice(3, 4);
     document.getElementById('ac5').value = inpAcntArray.slice(4, 5);
     document.getElementById('ac6').value = inpAcntArray.slice(5, 6);
     document.getElementById('ac7').value = inpAcntArray.slice(6, 7);
     document.getElementById('ac8').value = inpAcntArray.slice(7, 8);
     document.getElementById('ac9').value = inpAcntArray.slice(8, 9);
     document.getElementById('ac10').value = inpAcntArray.slice(9, 10);
     document.getElementById('ac11').value = inpAcntArray.slice(10, 11);
     document.getElementById('ac12').value = inpAcntArray.slice(11, 12);
     document.getElementById('ac13').value = inpAcntArray.slice(12, 13);
     document.getElementById('ac14').value = inpAcntArray.slice(13, 14);
     document.getElementById('ac15').value = inpAcntArray.slice(14, 15);
     document.getElementById('ac16').value = inpAcntArray.slice(15);
     var updateAct = document.getElementById('RfinalAcntNumber').value;
     var abArray = new Array((jqAbNum.charAt(0)),
        (jqAbNum.charAt(1)),
        (jqAbNum.charAt(2)),
        (jqAbNum.charAt(3)),
        (jqAbNum.charAt(4)),
        (jqAbNum.charAt(5)),
        (jqAbNum.charAt(6)),
        (jqAbNum.charAt(7)),
         (jqAbNum.charAt(8)),
         (jqAbNum.charAt(9))
     );
     document.getElementById('ab1').value = jqAbNum.slice(0, 1);
     document.getElementById('ab2').value = jqAbNum.slice(1, 2);
     document.getElementById('ab3').value = jqAbNum.slice(2, 3);
     document.getElementById('ab4').value = jqAbNum.slice(3, 4);
     document.getElementById('ab5').value = jqAbNum.slice(4, 5);
     document.getElementById('ab6').value = jqAbNum.slice(5, 6);
     document.getElementById('ab7').value = jqAbNum.slice(6, 7);
     document.getElementById('ab8').value = jqAbNum.slice(7, 8);
     document.getElementById('ab9').value = jqAbNum.slice(8);

 });
 $('.ac').keyup(function () {
     debugger;
     var elem17 = $('#bankaccountnumber').val('')[0];
     $('.ac').each(function () {
         elem17.value += this.value;
     });
 });
 $('.reAC').keyup(function () {

     var elem1 = $('#RfinalAcntNumber').val('')[0];
     $('.ac').each(function () {
         elem1.value += this.value;
     });
 });
 $('.ab').keyup(function () {

     var ele17 = $('#finalABNumber').val('')[0];
     $('.ab').each(function () {
         ele17.value += this.value;
     });
 });
 $('.reAB').keyup(function () {

     var ele1 = $('#ReABNumber').val('')[0];
     $('.reAB').each(function () {
         ele1.value += this.value;
     });
 });
   </script>
  <style type="text/css">
    .ac{width:15px;}    
    .reAC{width:15px;}
    .ab{width:15px;}
     .reAB{width:15px;}
    </style>

Answer 1

<强>更新
如果您希望在键入时发生这种情况，请绑定到输入框的keyup事件。

$('.digit').keyup(function(){

    var elem17 = $('#elem17').val('')[0];
    $('.digit').each(function(){
      elem17.value += this.value;
    });

});

在http://jsfiddle.net/gaby/NNRtt/1/

更新了演示

原始回答

您可以为这些元素class="digit"添加一个类，然后执行

var elem17 = $('#element17id').val('')[0];
$('.digit').each(function(){
  elem17.value += this.value;
});

以上假设使用 textbox 表示type="text"的输入元素。

演示http://jsfiddle.net/gaby/NNRtt/

如果您指的是其他类型的元素，例如span或div ..那么请使用

var alltext = '';
$('.digit').each(function(){
  alltext += $(this).text();
});
$('#element17id').text( alltext );

Answer 2

使用普通的javascript并假设您有16个文本框id="item1"到"item16"，第17个字段有id="itemTotal"：

var str = "";
for (var i = 1; i <= 16; i++) {
    str += document.getElementById("item" + i).value;
}
document.getElementById("itemTotal").value = str;

我假设您还需要验证数据（检查非法字符或空字段）。

好的，根据您的其他评论，听起来您希望此集合进入公共字段，以便在用户输入时自动运行。这是一个jQuery版本：

工作演示：http://jsfiddle.net/jfriend00/kWPwZ/

<强> HTML：

<div id="input">
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
<input class="digit" value="0" maxlength="1"/>
</div>

<div id="result">
<input id="total" value="0000000000000000" readonly="readonly"/>
</div>

Javascript （仅在DOM准备就绪时执行）：

function collectValues() {
    var result="";
    var value;
    $(".digit").each(function() {
        value = $(this).val();
        if (!value) {
            value = "0";
        }
        result += value;
    });
    $("#total").val(result);
}

function handleKey(e) {
    if (e.which < 48 || e.which >= 58) {
        e.preventDefault();
    }
    setTimeout(collectValues, 1);   // collect the values after the key has been processed
}

function select() {
    $(this).select();
}

function clear() {
    $(this).val("");
}

function check() {
    if ($(this).val() == "") {
        $(this).val("0");
    }
}

$(".digit").keypress(handleKey).focus(select).blur(check).click(clear);

使用jquery的字符串concat代码

2 个答案: