如何将四个文本框值复制到HTML中的textarea？

Question

我有一个包含四个textboxes和一个textarea字段的表单。

形式类似于请求表单。我希望将content四个textboxes复制到textarea。

为此，我写了onkeyup事件，同时将其值复制到textarea，但我希望将所有四个文本框值复制到文本区域。

这是我为onkeyup事件

编写的代码

<input type="text" id="C.name" name="C.name" required onkeyup="document.getElementById('message').value=this.value">

此外，我附上了我的表单图片以获得更好的想法，在图片中您可以看到一个文本框的值被复制到textarea。

我应该怎么做才能将所有文本框的值复制到textarea

Answer 1

创建一个函数，并从onkeyup属性中调用它。您的功能可能如下所示：

function fillMessage() {
    var nam = document.getElementById('name');
    var com = document.getElementById('company');
    var ema = document.getElementById('email');
    var pho = document.getElementById('phone');
    var msg = document.getElementById('message');
    msg.value = nam.value + com.value + ema.value + pho.value;
}

每个表单字段都有onkeyup="fillMessage()"属性。这是live demo。

Answer 2

您需要连接输入值并将键盘事件绑定到所有输入，这与本示例的内容类似：

var aggregateInput = function()
{
    var value = jQuery('input[name="name"]').val() + 
        jQuery('input[name="company"]').val() + 
        jQuery('input[name="email"]').val() + 
        jQuery('input[name="number"]').val();

    jQuery('textarea[name="aggregated"]').val(value);
}

jQuery('input[type="text"]').on('keyup', aggregateInput);

jsfiddle：http://jsfiddle.net/v9fe2532/1/

<强>更新

由于你从未表示过你在项目中使用过jQuery，我也创建了一个非jQuery版本。使用onkeyup =“aggregateInput（）”在所有输入上使用onkeyup输入属性绑定以下函数：

function aggregateInput()
{
    var value = document.getElementById('nameInput').value
        + document.getElementById('companyInput').value
        + document.getElementById('emailInput').value
        + document.getElementById('numberInput').value;

    document.getElementById('aggregated').value = value;
}

jsfiddle：http://jsfiddle.net/v9fe2532/4/