Question

我正在尝试将多个用户输入组合在一起，然后在按下按钮后将它们组合到一个textarea中。

例如： User1：嘿，我刚认识你 User2：这太疯狂了 User3：但这是我的号码，所以叫我也许

综合结果：
嘿，我刚认识你，这很疯狂，但这是我的号码所以叫我也许

这是我的代码按钮单击目前无法正常工作，但是当我在它工作之前尝试它时，我认为我有一些问题，而我的Jquery会触发这个不寻常的结果：

HTML和导入：

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

      <input class="combine" id="input1" disabled="true"></input>
      <input class="combine" id="input2" disabled="true"></input>
      <input class="combine" id="input3" disabled="true"></input>
      <input class="combine" id="input4" disabled="true"></input>
      <input class="combine" id="input5" disabled="true"></input>
      <input class="combine" id="input6" disabled="true"></input>

      <input class="combine" id="Voltes5" disabled="true" size="45"></input>


      <button id="setVal">Set</button>

Jquery的

$(document).ready(function(){ 
  $('#setVal').on('click',function(){

        jQuery(function(){
    var form = $('.combine');
    form.each(function(){
    $('.Voltes5').append($(this).text()+ ' ');
    });
    });
        });
        });

先生Arun P Johny的更新

User1：如果是a（合并时没有逗号）
User2：将是 User3：有办法

综合结果：如果是遗嘱，那就有办法

Answer 1

尝试

$(document).ready(function () {
    $('#setVal').on('click', function () {
        var form = $('.combine').not('#Voltes5');
        var vals = form.map(function () {
            var value = $.trim(this.value)
            return value ? value : undefined;
        }).get();
        $('#Voltes5').val(vals.join(', '))
    });
});

演示：Fiddle

Answer 2

$(document).ready(function(){ 
  $('#setVal').on('click',function(){
    var val='';
    $('.combine').not('#Voltes5').each(function(){
        val+=$(this).val();
    });
    $('#Voltes5').val(val);
  });
});

.text（）将给出元素的文本，对于输入值，你必须使用.val（）

Answer 3

以下是一种方法：

$('#setVal').on('click', function () {
    $(".combine[id^=input]").each(function () {
        if(this.value) {
            $("#Voltes5")[0].value += ' ' + this.value;
        }
    });
});

Answer 4

有几种不同的方法可以做到这一点。

我这样做是使用数组：

$(document).ready(function () {
    $('#setVal').on('click', function () {
        //create an array for the values
        var inpAry = [];

        $('.combine').each(function () {
            //add each value to the array
            inpAry.push($(this).val+' ');
        });
        //set the final input val 
        $('#Voltes5').val(inpAry);
    });
});

但您需要从combine中移除#setVal类，因为它将包含在.each中。

这样也可以在keyup上更新最后一个框，因为我不只是附加值，每次都会设置组合值。

Answer 5

这是一个不可读性的单行;）

$('#setVal').click(function(){$('#Voltes5').val($('.combine').not('#Voltes5').map(function(){return $(this).val();}).get().join(''))});

展开：

$('#setVal').click(function(){
$('#Voltes5').val(
  $('.combine')
  .not('#Voltes5')
  .map(
    function(){
      return $(this).val();
    })
  .get()
  .join('')
);
});

得到它：http://jsfiddle.net/ArtBIT/u57Zp/

Answer 6

因此，代码中存在直接的大问题，即您将Voltes5元素称为类，而不是ID。你想要的jQuery选择器是：

#Voltes5

而不是：

.Voltes5

但是，为了功能和最佳实践，还有一些其他的事情要考虑。首先，Voltes5元素也有类combine，这意味着$('.combine').each()调用将包含此元素。这样做的结果是，它还会在代码运行时将其当前文本附加到自身（或者，当代码运行时进行上述更正）。

当抓取输入元素的当前输入文本时，jQuery .val()调用是您想要的，而不是.text() - 请参阅this answer进行更多讨论。

另一件值得注意的事情是，您应该明确指定input这些元素的 sort ; <input type="text">比<input>更受欢迎。

最后，input是一个 void元素（reading），这意味着它不应该在开始和结束标记之间有任何内容。理想情况下，你甚至不会给出结束标记;要么只有开始标记，要么自我关闭它：

<input>
<input />

HTH

Answer 7

替换$('.Voltes5').append($(this).text()+ ' ');
与

$('#Voltes5').append($(this).text()+ ' ');

Jquery：将多个用户输入组合到一个文本区域？

7 个答案: