Jquery：如何将多个用户输入合并到一个文本区域中？

Question

我正在尝试将多个用户输入组合在一起，然后在按钮单击后将它们合并到一个文本区域中。

例如： 用户1：嘿，我刚认识你 用户2：这也太疯狂了吧 用户3：但是这是我的电话号码，所以打给我吧

合并后结果为： 嘿，我刚认识你，这也太疯狂了吧，但是这是我的电话号码，所以打给我吧

这里是我的代码，按钮单击当前无法工作，但之前我尝试过它可以工作，所以我想我的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()+ ' ');
    });
    });
        });
        });

为阿伦·P·约翰尼先生更新

用户1：如果有意愿（组合时不需要逗号）
用户2：将会
用户3：就有方法

结合结果： 如果有意愿，就有方法。

- Mr. Fox

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

- Arun P Johny

---

先生，我很感激您的回答，它确实解决了我的问题，但是我不能不理解就接受它，我可以问一下在这行代码 "return value ? value : undefined;" 中发生了什么吗？再次感谢。 - Mr. Fox

@user3046019 ? 是一个三元运算符，它的读法类似于 if else 语句。该语句也可以这样写 - if(value) { return value } else { return undefined }; 如果有值返回它，否则返回 undefined。这里有一个关于三元运算符的问题 -> https://dev59.com/PWkv5IYBdhLWcg3w1kIJ - Mark Walters

@user3046019 这是一个三元运算符... 如果输入元素为空，则我们不希望将空值添加到“vals”数组中，因此返回未定义。 - Arun P Johny

先生，我可以问一下吗？我能否设置一个条件，在其中第一个用户输入不包含逗号（，），而其余的输入则包含逗号？对于这个额外的问题，我很抱歉，我只是希望能够完成它。谢谢。 - Mr. Fox

@user3046019 抱歉，您能再解释一下需求吗？如果可以的话，请提供一个示例。 - Arun P Johny

先生 @Arun P Johny，我发布了我的问题，是否可以添加那个条件？ - Mr. Fox

Answer 2

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

.text()方法会返回元素的文本内容，如果要获取输入框中的值，则需要使用.val()方法。

- Bhadra

Answer 3

这是一种方法：

在此处执行：

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

- Salman A

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);
    });
});

但是你需要从 #setVal 中删除 combine 类，因为它会被包含在 .each 中。

这样也可以在 keyup 上更新最终框，因为我不仅仅是追加值，每次都设置了组合值。

- wf4

---

不讨论为什么这是更好的方法，或者为什么 OP 应该删除 combine 类。 - unwitting

我希望实际阅读代码注释就足够了。@unwitting，你应该看看何时以及为什么应该使用负投票... 我不认为我的答案符合那个标准。 - wf4

我不这么认为 - 代码中没有关于合并类的注释，你的编辑更加详细说明了。 - unwitting

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/

- ArtBIT

Answer 6

所以代码中存在一个严重的问题，就是你将Voltes5元素引用为类而不是ID。你需要使用的jQuery选择器是：

#Voltes5

改为：

.Voltes5

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

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

另一个需要注意的事情是，您应该明确指定这些元素的input的sort是什么；<input type="text">比<input>更可取。

最后，input 是一个 无内容元素 (reading)，这意味着在开放和关闭标签之间不应该有任何内容。理想情况下，您甚至不需要提供一个关闭标签；只需使用开放标签或者 自闭合 标签即可：

<input>
<input />

HTH

- unwitting

Answer 7

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

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

- bedane

---

我做了，先生，但是没有起作用，我正在调整一些东西。如果获得更多信息，我会更新问题。 - Mr. Fox