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

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

假设输入具有name ID和textarea的具有area一个ID，那么：

$("#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

---

脚注：

1. change只响应于模糊（即，用户按压标签或点击输入之外）。
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的情况下重新使用表单。它也工作得更好（例如，您可以自由编辑两个输入）。

Answer 2

试试这个：

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

Answer 3

你可以尝试这样的事情：

<script> 

    $(function() { 

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

    }); 

</script>  

希望它可以帮助你！

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文本的PART部分。 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> 

通知我搬到你投入的标签（这是做不使用IDS的技术上是正确的方式），去掉了<br>标签（你应该使用CSS这个），并将称呼变成非用户可编辑的文本。然后你的JavaScript可以简单

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

然后在前面加上"Dear "+firstName线到服务器上的消息。

另外我会指出它不再是2009年了，没有理由直接使用jquery来处理这样的事情，当有优秀的框架，不会强迫你手动执行许多事情，如Knockout和Angular 。

Answer 6

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