javascript - 获取输入文本框的值并将其添加到文本区域

Question

我是 jQuery 的初学者，我想知道这是否可行。我有一个带有名称输入文本框的表单。我想抓取用户在该文本框中输入的内容并将其添加到我的文本区域的第一句话中。因此该文本区域会显示“亲爱的”(无论用户输入什么)。任何朝正确方向的插入将不胜感激。

<form>
<label>First Name:</label>
<input type="text" class="fName" />
<br /><br />
<label>Last Name:</label>
<input type="text" class="lName">
<br /><br />
<textarea>Dear +firstname+</textarea>
</form>

我的表格相当简单。我还没有尝试过任何事情，但你帮助我朝着正确的方向前进。谢谢。

Answer 1

假设输入的 ID 为 name，文本区域的 ID 为 area，则:

$("#name").on("input", function(){
  var name = $(this).val();
  var msg = "Your message here";
  var content = "Dear "+name+", \n" + msg;
  $("#area").text(content);
});

我强烈建议不要使用 change¹ 或 keyup² 作为输入³ 是对用户是否更改了任何内容的更全面的检查。

这是一个JSFiddle example

<小时/>

脚注:

1. change 仅在模糊时响应(即用户按下 Tab 或在输入外部单击)。
2. keyup 仅适用于按键，因此，例如，当用户使用鼠标粘贴时，它不会注册。
3. input 注册对输入的任何更改。

<小时/>

更新

根据我与@GeorgeMauer 的讨论，以下是推荐的方法:

$("input.full-name").on("input", function(){
  var full_name = $(this).val();
  var form = $(this).closest("form");
  var message = form.find(":input.message");
  var content = message.val();
  var lines = content.split("\n");
  lines[0] = "Dear " + full_name + ",";
  var new_message = lines.join("\n");
  message.val(new_message);
});

请参阅更新后的JSFiddle example .

这具有重复使用表单而无需添加任何额外 JavaScript 的额外好处。而且它的效果也更好(例如，您可以自由编辑两个输入)。