Text von Inputfield zu Textarea übernehmen und positionieren

[Sebbi85]

Guten Abend,

anbei eine Frage.
Ich würde gerne den Text aus zwei Inputfeldern beim schreiben gleichzeitig in einer Textarea wiedergeben.
Dazu sollen die Eingaben vom den Inputfeldern entsprechend in der Textarea positioniert werden.

<form>
<label> Vorname </label>
<input type="text" id="vorname" name="vorname" value="" placeholder="Vorname">
<label> Nachname </label>
<input type="text" id="nachname" name="nachname" value="" placeholder="Nachname">
<textarea id="textfield" name="textfield" value="" rows="4" cols="50">

Sehr geehrte Damen und Herren,

folgende Daten haben Sie angegeben:

Vorname: ***Hier soll die Eingabe von Vorname stehen***
Nachname: ***Hier soll die Eingabe von Nachname stehen***

Mit freundlichen Grüßen

</textarea>
</form>

$("#vorname").keyup(function(){
    $("#textfield").val(this.value);
});
$("#nachname").keyup(function(){
    $("#textfield").val(this.value);
});

JSFiddle: https://jsfiddle.net/t8x2r9wg/


Über Hilfe würde ich mich freuen. Liebe Grüße

[hellbringer]

<input type="text" id="vorname" name="vorname" value="" placeholder="Vorname">
<input type="text" id="nachname" name="nachname" value="" placeholder="Nachname">
<textarea id="textfield" name="textfield" value="" rows="10" cols="50">

Sehr geehrte Damen und Herren,

folgende Daten haben Sie angegeben:

Vorname: {vorname}
Nachname: {nachname}

Mit freundlichen Grüßen

</textarea>

$(function() {
    var $textField = $('#textfield');
    var $vorname = $('#vorname');
    var $nachname = $('#nachname');

    var template = $textField.val();

    var updateTextField = function() {
        $textField.val(template
            .split('{vorname}').join($vorname.val())
            .split('{nachname}').join($nachname.val())
        );
    };

    $vorname.on('input', updateTextField);
    $nachname.on('input', updateTextField);
});

[Sebbi85]

Vielen Dank schon einmal. Bei mir passiert nichts wenn ich den Code bei JSFiddle teste.
Muss ich

  {vorname},    {nachname}

noch anpassen?

EDIT: Wenn der Text in ein Inputfeld eingetragen wird, soll der in Echtzeit in die Textarea eingetragen werden.
Benötigt man dazu die

.keyup(function()

?

[hellbringer]

Wozu willst du unbedingt .keyup() verwenden? Nicht jede Eingabe findet per Tastatur statt.

Und es funkioniert sehr wohl: https://jsfiddle.net/2yasw9kg/

[Sebbi85]

Funktioniert jetzt wunderbar, musste noch JQuery auswählen... vielen Dank für deine tolle Hilfe

[Arne Drews]

Nur der Vollständigkeit halber, das geht auch ohne jQuery in gleicher Kürze:

var txtField = document.querySelector('#textfield');
var firstName = document.querySelector('#vorname');
var lastName = document.querySelector('#nachname');

var tpl = txtField.value;

var update = function()
{
  txtField.value = tpl
    .replace('{vorname}', firstName.value)
    .replace('{nachname}', lastName.value);
}

firstName.addEventListener('input', update)
lastName.addEventListener('input', update)

[Sebbi85]

Perfekt, vielen Dank