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

Question

我一直在寻找代码以显示输入到多个文本框字段中的值，这些值作为人员键入在页面上组合。我目前有 6 个文本框（描述 1、描述 2、描述 3、描述 4、描述 5、描述 6），它们在后端与 PHP 组合成一个"final_description"，然后将其保存在数据库中。我的目标是让用户能够在 PHP 保存和处理表单之前看到组合所有 6 个字段的final_description的外观。我正在寻找的代码与我们在这里的堆栈溢出非常相似，当您键入它时，它会将其添加到下面，以便您可以看到它将如何输出。我只想让它将多个文本框组合成一个预览。

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