使用javascript替换表单中的文本答案

【问题标题】：Replace text in form using javascript使用javascript替换表单中的文本
【发布时间】：2012-06-21 22:39:22
【问题描述】：

我有一个包含多个字段的表单。第一个字段称为主题。我想要做的是禁用用户在字段中输入的功能，但它仍然显示，并且他们输入到其他三个字段的文本显示在第一个字段中的变量之间有空格。示例：在这种情况下：“Second_Field: John”“Third_Field: Doe”“Forth_Field: New part”然后在第一个字段，主题上，它将显示：John Doe New Part

感谢您的帮助。

【问题讨论】：

同意。您需要展示一些您尝试过但不起作用的代码，并说明您为使其工作而尝试做的事情。

标签： javascript forms text field replace

【解决方案1】：

您可以尝试以下方法：

<!-- HTML -->
<input type="text" id="subject" disabled="disabled">
<input type="text" id="field1">
<input type="text" id="field2">
<input type="text" id="field3">

// JavaScript
var fields = [];
for (var i = 1; i <= 3; i++) {
    fields.push(document.getElementById("field" + i).value);
}
document.getElementById("subject").value = fields.join(" ");

【讨论】：

【解决方案2】：

试试这个：

<script>
function UpdateText()
{
  document.getElementById("subject").value =document.getElementById("Field1").value + " " +   document.getElementById("Field2").value + " " + document.getElementById("Field3").value;
}
</script>

<input type="text" id="subject" disabled="disabled"/>
<input type="text" id="Field1" onchange="UpdateText()";/>
<input type="text" id="Field2" onchange="UpdateText()";/>
<input type="text" id="Field3" onchange="UpdateText()";/>

【讨论】：

【解决方案3】：

HTML：

<form>
<p><input id="subject" name="subject" disabled size="60"></p>
<p><input id="Second_Field" class="part">
   <input id="Third_Field" class="part">
   <input id="Fourth_Field" class="part"></p>
</form>

JavaScript：

var updateSubject = function() {
  var outArray = [];
  for (var i=0;i<parts.length;i++) {
      if (parts[i].value !== '' ) {
        outArray.push(parts[i].value);
      }
  }
  document.getElementById('subject').value = outArray.join(' ');
};
var parts = document.getElementsByClassName('part');
for (var i=0;i<parts.length;i++) {
  parts[i].onkeydown = updateSubject;
}

【讨论】：