简体   繁体   English

如何在没有提交按钮的情况下动态在 JavaScript textarea 中添加和 Append

[英]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');

Working Example工作示例

 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>

React:如何提交表单<textarea>&lt;i&gt;with enter key and without a submit button with React Hooks?&lt;/div&gt;&lt;/i&gt;&lt;b&gt;带有回车键且没有带有 React Hooks 的提交按钮?&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> Halo 伙计们,我对反应很陌生,我想提交一个只有文本区域的表单,并按下enter键。 我遵循了一些 SO 问题,但仍然没有运气,因为它没有被提交。 我还想在提交后清除文本区域。 我怎样才能用下面的代码做到这一点?</p><p> 这是我目前拥有的代码。</p><pre> const { register, handleSubmit, control, errors } = useForm(); const CommentOnSubmit = (data) =&gt; { let formData = new FormData(); formData.append('content', data.content); formData.append('user', user?.id); axiosInstance.post(`api/blogs/` + slug + `/comment/`, formData); }; // const commentEnterSubmit = (e) =&gt; { // if(e.key === 'Enter' &amp;&amp; e.shiftKey == false) { // return( // e.preventDefault(), // CommentOnSubmit() // ) // } // } &lt;form noValidate onSubmit={handleSubmit(CommentOnSubmit)}&gt; &lt;div className="post_comment_input"&gt; &lt;textarea type="text" placeholder="Write a comment..." name="content" ref={register({required: true, maxLength: 1000})} /&gt; &lt;/div&gt; &lt;div className="comment_post_button"&gt; &lt;Button type="submit" variant="contained" color="primary"&gt;comment&lt;/Button&gt; &lt;/div&gt; &lt;/form&gt;</pre><p> 请帮忙。</p><p> 非常感谢。</p></div> - React: How to submit a form with <textarea> with enter key and without a submit button with React Hooks?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在JavaScript中追加并添加双重转义到字符串? - How to append and prepend double escape to a string in JavaScript? JavaScript附加和前置与jQuery追加和前置 - JavaScript append and prepend vs jQuery append and prepend Javascript:如何附加 <textarea> 行 - Javascript: How to append <textarea> rows Javascript textarea字数不启用提交按钮 - Javascript textarea word count not enabling submit button 如何在 append 和 prepend 函数之间动态选择? - How can I choose dynamically between append and prepend function? React:如何提交表单<textarea>&lt;i&gt;with enter key and without a submit button with React Hooks?&lt;/div&gt;&lt;/i&gt;&lt;b&gt;带有回车键且没有带有 React Hooks 的提交按钮?&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> Halo 伙计们,我对反应很陌生,我想提交一个只有文本区域的表单,并按下enter键。 我遵循了一些 SO 问题,但仍然没有运气,因为它没有被提交。 我还想在提交后清除文本区域。 我怎样才能用下面的代码做到这一点?</p><p> 这是我目前拥有的代码。</p><pre> const { register, handleSubmit, control, errors } = useForm(); const CommentOnSubmit = (data) =&gt; { let formData = new FormData(); formData.append('content', data.content); formData.append('user', user?.id); axiosInstance.post(`api/blogs/` + slug + `/comment/`, formData); }; // const commentEnterSubmit = (e) =&gt; { // if(e.key === 'Enter' &amp;&amp; e.shiftKey == false) { // return( // e.preventDefault(), // CommentOnSubmit() // ) // } // } &lt;form noValidate onSubmit={handleSubmit(CommentOnSubmit)}&gt; &lt;div className="post_comment_input"&gt; &lt;textarea type="text" placeholder="Write a comment..." name="content" ref={register({required: true, maxLength: 1000})} /&gt; &lt;/div&gt; &lt;div className="comment_post_button"&gt; &lt;Button type="submit" variant="contained" color="primary"&gt;comment&lt;/Button&gt; &lt;/div&gt; &lt;/form&gt;</pre><p> 请帮忙。</p><p> 非常感谢。</p></div> - React: How to submit a form with <textarea> with enter key and without a submit button with React Hooks? 动态Javascript计算,无需提交按钮 - Javascript calculations dynamically with no submit button 动态生成Javascript提交按钮 - Dynamically generate Javascript submit button HTML/ Javascript:如何提交输入并使用提交/添加更多按钮填写文本区域 - HTML/ Javascript: How to submit input and have it fill in a textarea with a submit/add more button 没有提交按钮的情况下如何向JavaScript提交表单? - How do I submit a form to JavaScript without the submit button?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM