Question

我有几个填充文本区域的文本字段。

我设法用javascript函数填充它。在文本字段的onblur事件中，传递textfield的值，textarea是具有此值的字段。

但是，我的问题如下：

如果我修改以前填充的文本字段，textarea将只是再次附加它。

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

1：如果我将焦点放在已填充的文本字段上并且我不修改它，则不会附加它（我用if语句和子字符串实现了它。 2：如果我修改了以前填充的文本字段，则文本区域不会在字符串的末尾再次附加它，但它只用文本字段的新值替换textarea的部分。

以下列两个文本字段为例：

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

如果我分别用John和Doe填写这些文本字段，则textarea值将变为：

txtName=John,txtSurname="Doe"

我设法实现了这一点。

我需要的是，如果我将John中的txtName编辑为Alex，则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
    }

从几个文本字段填充textarea

2 个答案: