如何在一个输入中克隆/复制几个输入的值

时间:2014-03-25 14:33:03

标签: javascript jquery html

您好我的学校项目需要这个。

我希望JAVASCRIPT复制/克隆4或5个输入字段的值,将其中的内容输入到单个输入中。

这是必须收集所有值的输入:

<input type="hidden" id="mainInput" name="main" value="" />

这是其余输入

<input type="text" id="input1" name="input1" value="info1" />
<input type="text" id="input2" name="input2" value="hello World" />
<input type="text" id="input3" name="input3" value="my SECOND" />
<input type="text" id="input4" name="input4" value="sure!" />

所以在最后一步,结果必须是:

<input type="hidden" id="mainInput" name="main" value="info1hello Worldmy SECONDsure!" />

PS必须在没有任何提交按钮的情况下发生...... JS中有一个名为 onFocus 的选项。

那么任何想法?

3 个答案:

答案 0 :(得分:3)

$('input[type="text"]').keydown(function () {
    $('#mainInput').val($('#input1').val() + $('#input2').val() + $('#input3').val() + $('#input4').val())
})

<强> jsFiddle example

答案 1 :(得分:1)

您可以尝试使用此方法并使用正常的jsfiddle

<input type="text" class="testvalues" id="input1" name="input1" value="info1" />
<input type="text" class="testvalues" id="input2" name="input2" value="hello World" />
<input type="text" class="testvalues" id="input3" name="input3" value="my SECOND" />
<input type="text" class="testvalues" id="input4" name="input4" value="sure!" />
<input type="hidden" id="mainInput" name="main" value="" />

 $('.testvalues').on('keyup',function(){    
      var txtfirst=$('#input1').val();
      var txtsecond=$('#input2').val();
      var txtthird=$('#input3').val();
      var txtfourth=$('#input4').val();

      $('#mainInput').val(txtfirst +" "+ txtsecond +" "+ txtthird +" "+ txtfourth );

});

http://jsfiddle.net/HGu5M/22/

看看小提琴

答案 2 :(得分:0)

$('input[type="text"]').change(function () {
    $('#mainInput').val($('#input1').val() + $('#input2').val() + $('#input3').val() + $('#input4').val());
})