从几个文本框中填充文本区

Question

我有几个文本框将填充文本区域。

我设法用javascript函数填充它。在文本字段的onblur事件中，文本字段的值被传递，textarea字段中包含该值。

不过，我的问题是：

如果我修改以前填充的文本框，文本区域将只需再次添加它。

我需要的是一些功能，如：

1：如果我给重点这是已经被填充的文本框，我不修改它，它不会被追加（我实现了这个用如果我修改一个先前填充的文本字段，那么文本区域不会在字符串的末尾再次附加它，但它会用该文本字段的新值替换文本区域的部分。

以下面的2个文本框为例：

<input type="text" id="txtName" name="txtName" /> 
<input type="text" id="txtSurname" name="txtSurname" /> 

如果我填补这些文本框分别约翰和李四，textarea的值将变为：

txtName=John,txtSurname="Doe" 

我设法实现这一点。

我需要的是，如果我从约翰编辑txtName的亚历克斯，textarea的值将是如下：

txtName=Alex,txtSurname=Doe 

，而不是像目前正在显示的，即

txtName=John,txtSurname=Doe,txtName=Alex 

应该我通过使用将存储所有文本字段值的数组来实现此目的？

任何帮助将不胜感激。

非常感谢提前。

Answer 1

下面的代码应该为你工作。我已将文本框包裹在div中。并在两个文本框中注册了一个onkeyup事件。

javascript代码遍历div中的每个文本框，并在textarea中打印其名称和值。

HTML

<div id="textBoxContainer"> 
    <input type="text" id="txtName" onkeyup="UpdateTextArea();" name="txtName" /> 
    <input type="text" id="txtSurname" onkeyup="UpdateTextArea();" name="txtSurname" /> 
</div> 
<textarea id="textAreaResult"></textarea> 

的Javascript

<script type="text/javascript"> 
    function UpdateTextArea() { 
     var textBoxContainerDiv = document.getElementById("textBoxContainer"); 
     var textboxes = textBoxContainerDiv.getElementsByTagName("input"); 
     var finalResult = ""; 
     var textAreaFinalResult = document.getElementById("textAreaResult"); 

     for (var i = 0; i < textboxes.length; i++) { 
      finalResult = finalResult + textboxes[i].id + "=" + textboxes[i].value + ","; 
     } 

     textAreaFinalResult.value = finalResult; 
    } 
</script> 

希望这有助于！ :)

Answer 2

为了记录在案，我觉得像这样的代码是一个丑陋的黑客攻击，但它应该做的伎俩......

var fieldName = "txtName"; //your field name 
    var newValue = "Alex"; //your new value 
    var value = document.getElementById("my-textarea").value; 
    value = "," + value; //add a comma so we can ensure we don't replace the wrong value where the fieldname is a substring of another fieldname 
    if(value.indexOf("," + fieldName + "=") > 0) //see if a value is already defined 
    { 
     var index = value.indexOf("," + fieldName + "=") + fieldName.length + 2; 
     var start = value.substring(0, index); //get the portion before the value 
     var end = value.substring(index); //get everything else 
     if(end.indexOf(",") > 0) 
     { 
      end = end.substring(end.indexOf(",")); //remove the value by reducing the end to the location of the next comma 
     }else{ 
      end = ""; //if there isn't another comma it was the last value in the list, so set the new end to nothing 
     } 
     value = start + newValue + end; 
     value = value.substring(1); //remove the starting comma we gave it 
     document.getElementById("my-textarea").value = value; 
    }else{ 
     //append it to the end as you are already doing 
    }