Question

我是jQuery的初学者，我想知道这是否可行。我有一个具有名称输入文本框的表单。我想抓住用户在该文本框中输入的内容并将其添加到我的textarea中的第一个句子中。所以文本区域会说亲爱的（无论用户输入什么）。任何正确方向的推动都将受到赞赏。

<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

试试这个：

$('input').keyup(function() {
    $('textarea').text($(this).val());
});

Answer 2

您可以尝试这样的事情：

<script>

    $(function() {

        $( "#name" ).change(function() {
            $("#textAreaId").append($( "#name" ).val());  
        });

     });

</script>

希望对你有所帮助！

Answer 3

~~假设输入的ID为name且textarea的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 ²作为input ³是一个更全面的检查用户是否有任何改变。

这是JSFiddle example

<强>脚注：

change仅响应模糊（即用户按下标签或在输入外点击）。
keyup仅适用于按键，因此在用户使用鼠标粘贴时不会注册。
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的情况下重复使用表单。它也可以更好地工作（例如，您可以自由编辑两个输入）。

Answer 4

修改：对于您的情况，您似乎没有正确设置表单。表单用于提交一组信息，然后将这些信息放在其他地方 - 它需要去的地方。因此，我将textarea移到了表单之外。

我建议像这样设置HTML：

<form id="target" action>
    <label>First Name:</label>
    <input type="text" id="fName" />
    <br /><br />
    <label>Last Name:</label>
    <input type="text" id="lName" /><br><br>
    <input type="submit" value="Submit"/>
    <br /><br />
</form>
<textarea id="message"></textarea>

这是我使用的jQuery：

$('form#target').submit(function(e) {
    e.preventDefault();
    var message, firstName, lastName;

    message = "Dear ";
    firstName = $('input#fName').val();
    lastName = $('input#lName').val();

    message += firstName + ' ';
    message += lastName + ',';
    $('textarea#message').text(message);
});

注意：我将class属性更改为id，因为id用于唯一标记。如果你想用jQuery一次性获取多个项目，那么就可以使用类了。

Preview Here

希望这有帮助！

Answer 5

因此，这是一个看似困难的问题，因为您正在尝试更新textarea中的文本部分。 textarea中没有结构，只是“文本”。所以你要问的是类似于打一桶乒乓球，在其中一个上写一个名字，混合桶，然后告诉别人他们必须不断用新的球取代命名的球。

虽然有很多方法可以做到这一点，但它引发了一系列我怀疑你想回答的问题 - 如果他们删除了第一行怎么办？如果他们直接在textarea更改名称怎么办？如果他们在文本区域多次写下他们的名字怎么办？如果他们的浏览器使用自上而下写的语言怎么办？

除非你准备回答这些问题（如果你是，你应该开始一个更具体的问题），我建议你改变你的方法。例如，我怀疑你希望他们能够改变第一行。因此，您可以按如下方式构建表单：

<form>
  <label>First Name: <input class="first-name" /></label>
  <label>Last Name: <input class="last-name" /></label>
  <aside class="salutations">Dear <span class="first-name-salutation"></span></aside>
  <textarea class="message"></textarea>
</form>

注意我已将输入移动到标签中（这是在不使用ID的情况下执行此操作的技术上正确的方法），删除了<br>标记（您应该使用css）并将称呼转移到非用户 - 可编辑的文字。然后你的javascript可以简单地

$(function(){
  $('input.first-name').on('input', function(){
    $('.first-name-salutation').text($(this).text());
  });
})

然后将"Dear "+firstName行添加到服务器上的消息中。

顺便说一下，我会指出它已经不再是2009了，当有优秀的框架不会强迫你像{{3 }和Knockout。

Answer 6

请您熟悉AJAX？如果是，那是最好的使用方法。

获取输入文本框的值并将其添加到textarea

6 个答案: