從幾個文本框中填充文本區

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 
    }