如何在一个文本框中连接两个或多个文本框值

user3851613 发表于 Dev

用户3851613

我想在一个文本框中连接两个或多个文本框值。在这里我使用id获取值，但该id将被动态添加，这意味着文本框将被动态添加。对于动态添加文本框，我正在使用for循环，但正在获取该值仅是最后一个文本框的值，仅是因为执行了循环。我想要所有文本框的值。请帮助我让我离开。谢谢。

这是动态文本框过程的代码：

在这个我在servlet中使用printwriter对象

int nums=5;
out.println("<input type='text' id='static'>");

int i;
for (i=0;i<nums; i++) {  
    out.println("<input type='text' Style='width:30px' maxlength='1' id='id"+i+"'onkeyup='sum();'> ");                  

    out.println("<script>function sum(){ alert('id"+i+"'); var txtFirstNumberValue=document.getElementById('id'+i+'').value;var result = document.getElementById('static').value + txtFirstNumberValue;alert(result);if (isNaN(result)){ document.getElementById('static').value = result; }}</script>");
}

但是，如果我使用静态文本框，我会得到所需的东西，但是我需要在动态过程中使用它。

这是静态文本框过程的代码：

<input type="text" maxlength="1" id="1"  onkeyup="sum();"/>
<input type="text" maxlength="1" id="2"  onkeyup="sum();"/>
<input type="text" maxlength="1" id="3"  onkeyup="sum();"/>
<input type="text"  id="4"/>

function sum() {
   var txtFirstNumberValue = document.getElementById('1').value;
   var txtSecondNumberValue = document.getElementById('2').value;
   var txtThirdNumberValue = document.getElementById('3').value;
   var result = txtFirstNumberValue + txtSecondNumberValue + txtThirdNumberValue;
   if (isNaN(result)) {
      document.getElementById('4').value = result;       
   }                        
}

请帮助我找出解决方案。谢谢。

彼得·卡

我不会使用内联JavaScript，如果确实需要它们，我会给我的元素适当的ID，否则我会使用类。

$(document).ready(function() {
  $('.in').on('input',function() {
    var allvals = $('.in').map(function() { 
        return this.value; 
    }).get().join('');
    $('.out').val( allvals );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="in" type="text" maxlength="1" id="i1"/>
<input class="in" type="text" maxlength="1" id="i2"/>
<input class="in" type="text" maxlength="1" id="i3"/>
<input class="out" type="text"  id="i4"/>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。