Automatisch zugewiesener Text.
Ich möchte 2 Textfelder erstellen, im einen soll der User Wörter eingeben können, im anderen größeren kann er dazu einen Text schreiben. Soweit so einfach.
Jetzt möchte ich jedoch, dass wenn der User ein bestimmtes Wort aus einer Liste eingibt und dieses Wort nach Eingabe eines Kommas oder durch verlassen des Textfeldes erkannt wird, dass große Textfeld automatisch mit dem dazugehörigen Text befüllt wird.
Beispiel:
Ich habe eine Einkaufsliste mit Äpfeln, Birnen und Bananen und Anmerkungen von Mutti:
"Äpfel" oder "Birnen" - "Nehme bitte Bio Produkte"
"Banane" - "Nehme die Krummen"
Gebe ich nun "Äpfel" in mein kleines Textfeld ein, erscheint " Nehme bitte Bio Produkte" automatisch im großen. Selbes wenn ich "Birnen" eingebe.
Gebe ich aber z.B. "Kirschen" ein, erscheint nichts im Großen und ich kann die Anmerkung selbst erstellen.
Wichtig ist, dass das große Textfeld erst automatisch befüllt wird nachdem ich ein Komma gesetzt habe oder das Feld verlassen habe.
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
body{
background:#154321;
margin:0;
padding:0;
}
h3{
font-size:20px;
color:white;
text-shadow:2px 2px 2px black;
}
#wra{
display:flex;
}
#ipu{
display:flex;
flex-direction:column;
border:10px solid white;
width:100%;
height:1000px;
padding:20px;
}
.box{
display:flex;
flex-direction:column;
flex:1;
text-align:center;
}
textarea{
margin-left:10%;
width:80%;
height:200px;
border:10px solid #aaaa32;
border-radius:25px;
padding:10px;
font-size:20px;
box-shadow:5px 5px 5px black;
}
#ausgabe{
width:100%;
margin-top:15px;
}
#ausgabe .line{
margin-left:15px;
width:calc(100% - 15px);
color:white;
font-size:20px;
}
#ausgabe .line .start{
width:150px;
color:white;
font-size:20px;
display:inline-block;
}
#ausgabe .line > .auss{
width:calc(100% - 150px);
color:white;
font-size:20px;
}
hr{
margin-bottom:15px;
border:1px solid white;
display:block;
}
</style>
<div id="ipu">
<div id="wra">
<div class="box">
<h3>Schreibe einen Text hier rein</h3>
<textarea id="rein"></textarea>
</div>
<div class="box">
<h3>hier kommt er dann wieder raus</h3>
<textarea id="rein1"></textarea>
</div>
</div>
<div id="ausgabe">
<hr> <span class="line"><span class="start"> </span><span class="auss" id="outt1"></span>
<hr>
</span>
</div>
<script>
obst=['Apfel','Birne','Kiwi','Mango'],
krumm=['Banane','Gurke'];
obstantwort=['Nehme bitte Bio Produkte'];
krumantwort=['Nehme die Krummen'];
var ant='';
$('#rein').on('keyup',function(){
checkliste=$('#rein').val();
komma=checkliste.indexOf(',');
if(komma!=-1){
fLen = obst.length;
for (i = 0; i < fLen; i++) {
text=obst[i];
ok=checkliste.indexOf(text);
if(ok!=-1){
ant+=obst[i]+' = '+obstantwort[0];
}
}
klen = krumm.length;
for (i = 0; i < klen; i++) {
textk=krumm[i];
okk=checkliste.indexOf(textk);
if(okk!=-1){
ant+=krumm[i]+' = '+krumantwort[0];
}
}
$('#rein1').html(ant);
}
});
</script>