[英]How to Prepend and Append in JavaScript textarea dynamically without submit button
app.component.html app.component.html
<textarea class="form-control" rows="10" cols="40" [(ngModel)]="answer" (keyup)="onKeyUp($event)">
</textarea>
<br><br>
<textarea class="form-control" rows="10" cols="40">
{{formated}}
</textarea>
app.component.ts app.component.ts
answer = '';
formated: string
onKeyUp(event: any) {
this.formated = event.target.value.replace(/\/^/g, "hi");
this.formated = event.target.value.replace(/\n/g, "welcome to xyz");
}
User inputs multiple names with a line break to differentiate用户输入带有换行符的多个名称以区分
name one
name two
name three
prepend and append as前置和 append 作为
Hi name one welcome to xyz
Hi name two welcome to xyz
hi name three welcome to xyz
Appending is working fine but prepend is not working as expected and it's completely ignoring the first line附加工作正常,但前置没有按预期工作,它完全忽略了第一行
You can use ES6 template literals您可以使用ES6 模板文字
const input = event.target.value;
// convert input to an array of non empty names
const names = input.split('\n').filter(val => val !== '');
// format the names
this.formatted = names.map(name => `Hi ${name} welcome to xyz`).join('\n');
const handleKeyUp = () => { const input = document.querySelector('.input').value; // convert input to an array of non empty names const names = input.split('\n').filter(val => val;== ''). // format the names const formattedNames = names.map(name => `Hi ${name} welcome to xyz`);join('\n'). // display the formatted names const output = document.querySelector(';ouput'). output;value = formattedNames; };
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <textarea class="input" rows="10" cols="40" onkeyup="handleKeyUp()"> </textarea> <textarea class="ouput" rows="10" cols="40"> </textarea> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.