Question

我一直在搜索代码失败，以便在页面上显示输入到多个文本框字段中的值作为人员类型。我目前有6个文本框（description1，description2，description3，description4，description5，description6），它们在后端与PHP组合，形成一个“final_description”，然后保存在数据库中。我的目标是让用户能够在PHP保存和处理表单之前查看所有6个字段的final_description结果。我正在寻找的代码与我们在stackoverflow上的代码非常相似，当你键入它时，它会在下面添加它，以便你可以看到它将如何输出。我只想把它结合在一起，将多个文本框组合成一个预览。

Answer 1

假设你有：

<input class="desc" id="desc1" />
<input class="desc" id="desc1" />
<input class="desc" id="desc1" />
<input class="desc" id="desc1" />

<div id="final_desc" />

这样可行：

window.onload = function(){
   function forEach(arr, fun){ return Array.prototype.forEach.call(arr, fun); };
   var inputs = document.querySelectorAll(".desc");
   function updateFinalDesc(){
       var finalDesc = "";
       forEach(inputs, function(inp){ finalDesc += inp.value + "<br/>"; });
       document.getElementById('final_desc').innerHTML = final_desc;
   };
   forEach(inputs, function(input){
       input.addEventListener('keypress', updateFinalDesc);
       input.addEventListener('change', updateFinalDesc);
   });
}

希望这会有所帮助。干杯

Answer 2

如果您使用knockout.js数据绑定库，请在此处解决此问题：

<div id="content">
    <input type="text" data-bind="value: description1" />
    <input type="text" data-bind="value: description2" />
    <input type="text" data-bind="value: description3" />
    <input type="text" data-bind="value: description4" />
    <input type="text" data-bind="value: description5" />
    <input type="text" data-bind="value: description6" />
    <span data-bind="value: combined"></span>
</div>

<script type="text/javascript">
function myViewModel()
{
    var self = this;
    self.description1 = ko.observable("");
    self.description2 = ko.observable("");
    self.description3 = ko.observable("");
    self.description4 = ko.observable("");
    self.description5 = ko.observable("");
    self.description6 = ko.observable("");

    self.combined= ko.computed(function() {
    return self.description1() + " " + self.description2()+ " " + self.description3()+ " " + self.description4()+ " " + self.description5()+ " " + self.description6();
    }, self);
}

ko.applyBindings(new myViewModel(), document.getElementById("content"));
</script>

请务必在页面中加入knockout.js库。

Answer 3

我接受了这个。我知道它可能不是最好的，但似乎有效：

var description1 = document.getElementById('description1');
var description2 = document.getElementById('description2');
var description3 = document.getElementById('description3');
var description4 = document.getElementById('description4');
var description5 = document.getElementById('description5');
var description6 = document.getElementById('description6');
description1.onkeyup = description1.onkeypress = function(){
document.getElementById('description1preview').innerHTML = this.value;
}
description2.onkeyup = description2.onkeypress = function(){
document.getElementById('description2preview').innerHTML = this.value;
}
description3.onkeyup = description3.onkeypress = function(){
document.getElementById('description3preview').innerHTML = this.value;
}
description4.onkeyup = description4.onkeypress = function(){
document.getElementById('description4preview').innerHTML = this.value;
}
description5.onkeyup = description5.onkeypress = function(){
document.getElementById('description5preview').innerHTML = this.value;
}
description6.onkeyup = description6.onkeypress = function(){
document.getElementById('description6preview').innerHTML = this.value;
}

在提交表单之前合并文本字段以进行预览

3 个答案: