如何将以前的输入值插入textarea？

Question

我是HTML / CSS的新手，并创建了一个简单的联系表单来输入姓名，号码，并且填充了textarea一条短信，但希望自动填充name文本字段中的区域，其中包含之前在联系表单中放入名称输入字段的内容。这样做的最佳方式是什么？

<fieldset>
<h1>Contact Form</h1>
<label for="name">Patient Name:</label>
<input name="name" id="name" type="text" size="40" maxlength="100">
<label for="number">Patient Number:</label>
<input name="number" id="number" type="text" size="40" maxlength="12">
<label for="message">Text Messge:</label>
<textarea name="message" id="message" cols="40" rows="10">
Hi [name], thank you for visiting us!
</textarea>
<input class="btn" name="submit" type="submit" value="Send">
</fieldset>

Answer 1

有些JavaScript可以解决您的问题。

将此script标记插入表单后的 HTML文件中。

<script>
  // save the location of the name field
  var name_field = document.getElementById('name');

  //add an event listener to activate if the value of the field changes
  name_field.addEventListener('change', function() {
    // when the field changes run the following code

    // copy the text (value)
    var name = name_field.value;

    // concatenate it with the desired message
    var autoFill = 'Hi ' + name + ', thank you for visiting us!';

    // and paste it into the message field.
    document.getElementById('message').value = autoFill;
  })
</script>

Answer 2

对于动态行为，你需要一些javascript。

<input name="number" id="number" type="text" oninput="getNumber()" size="40" maxlength="12">

 <script>
var getNumber = function() {
    document.getElementById("message").innerHTML = "Hi " + document.getElementById("name").value + ", thank you for visiting us";
}
</script>

现在看起来，您可能不应该使用textArea来显示此消息，而是使用段落元素。 如果您对此感兴趣，AngularJS非常适合这样的场景。