blocks|key|929424|text|因此，我不认为有一种简单的方法来做到这一点(即使这样做并不难)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|929425|您需要做的是获取TextArea的每一行，您应该能够通过这样的方法获得这样的结果：|offset|length|style|CODE|929426|var+textArea+=+document.getElementById("my-text-area");
var+arrayOfLines+=+textArea.value.split("\n");|code-block|syntax|javascript|929427|来源：https://stackoverflow.com/questions/9196954/how-to-read-line-by-line-of-a-text-area-html-tag|929428|一旦有了arrayOfLines，就可以输出文本，就像输入了一个小的for()循环一样。|929429|entityMap^0|0|8|8|0|0|3|2K|0|4|C|Y|5|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

<p>So I don't think there is a simple way of doing so (even if the way of doing is not so hard).</p>

<p>What you'll have to do is get each line of the <code>TextArea</code>, you should be able to get this with something like this : </p>

<pre><code>var textArea = document.getElementById("my-text-area");
var arrayOfLines = textArea.value.split("\n");
</code></pre>

<p>Source: <code>https://stackoverflow.com/questions/9196954/how-to-read-line-by-line-of-a-text-area-html-tag</code></p>

<p>Once you have <code>arrayOfLines</code>, you can output the text like it was typed in with a little <code>for()</code> loop.</p>


blocks|key|2370912|text|在我看来，问题在于style={{+width:+"100%25"+}}。尝试限制TextAreas宽度。例如：style={{+width:+"100px"+}}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2370913|entityMap^0|9|P|1I|Q|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>In my opinion, the problem is in <code>style={{ width: "100%" }}</code>. Try to limit TextAreas width. For example: <code>style={{ width: "100px" }}</code></p>


blocks|key|1739090|text|您可以使用pre标记显示输入的内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1739091|我使用vanilla+JS创建了下面的示例。您可以在react中实现相同的功能。|1739092|​|1739093|<textarea+id="tarea"+rows="2"+style="width:+100%25"+onclick="handleValue()">
</textarea>
<p+id="display"></p>
<script>
++function+handleValue()+{
++++var+tarea+=+document.getElementById('tarea');
++++var+disp+=+document.getElementById('display');
++++disp.innerHTML+=+'<pre>'+%2B+tarea.value+%2B+'</pre>';
++}
</script>|code-block|syntax|javascript|1739094|1739095|例如：|1739096|<pre>{this.state.value}</pre>应该能做到这一点。|1739097|希望这能有所帮助！干杯。|1739098|entityMap^0|5|3|0|3|A|Q|5|0|0|0|0|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|18|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1C|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|W|$]]

<p>You can use the <code>pre</code> tag for displaying the content as entered.</p>

<p>I have created following example using <code>vanilla JS</code>. You can implement the same in <code>react</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id="tarea" rows="2" style="width: 100%" onclick="handleValue()"&gt;
&lt;/textarea&gt;
&lt;p id="display"&gt;&lt;/p&gt;
&lt;script&gt;
  function handleValue() {
    var tarea = document.getElementById('tarea');
    var disp = document.getElementById('display');
    disp.innerHTML = '&lt;pre&gt;' + tarea.value + '&lt;/pre&gt;';
  }
&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>For eg:</p>

<p><code>&lt;pre&gt;{this.state.value}&lt;/pre&gt;</code>
should do the trick.</p>

<p>Hope this helps! Cheers.</p>


blocks|key|1739171|text|以下是这项任务的两个选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1739172|在按下"Enter“键时，将一个新行字符追加到行中。当显示文本时，在换行符上拆分。CodeSandbox示例，侦听密钥代码|ordered-list-item|offset|length|1739173|function+App()+{
++const+[text,+setText]+=+React.useState("");

++function+handleChange(e)+{
++++if+(e.key+===+"Enter")+{
++++++setText(`${e.target.value}\n`);
++++}
++++setText(e.target.value);
++}

++return+(
++++<div>
++++++<TextArea
++++++++rows={4}
++++++++value={text}
++++++++onChange={handleChange}
++++++++onPressEnter={handleChange}
++++++/>

++++++{text.length+>+0+&&+text.split("\n").map((l,+i)+=>+<p+key={i}>{l}</p>)}
++++</div>
++);
}|code-block|syntax|javascript|1739174|使用pre+HTML标记。这很简单，但默认情况下，它将文本呈现为单空间字体。CodeSandbox示例，使用预标记|style|CODE|1739175|function+App()+{
++const+[text,+setText]+=+React.useState("");

++function+handleChange(e)+{
++++setText(e.target.value);
++}

++return+(
++++<div>
++++++<TextArea
++++++++rows={4}
++++++++value={text}
++++++++onChange={handleChange}
++++++++onPressEnter={handleChange}
++++++/>

++++++<pre>{text}</pre>
++++</div>
++);
}|1739176|entityMap|0|LINK|mutability|MUTABLE|url|https://codesandbox.io/s/nervous-morning-oq3v7|1|https://codesandbox.io/s/gifted-kalam-4uyhm^0|0|15|K|0|0|0|2|3|12|J|1|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@$E|13|F|14|1|15]]|A|$]]|$1|G|3|H|5|I|7|16|8|@]|9|@]|A|$J|K]]|$1|L|3|M|5|D|7|17|8|@$E|18|F|19|N|O]]|9|@$E|1A|F|1B|1|1C]]|A|$]]|$1|P|3|Q|5|I|7|1D|8|@]|9|@]|A|$J|K]]|$1|R|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]|Z|$5|U|V|W|A|$X|10]]]]

<p>Provided below are two options for this task:</p>

<ol>
<li>On keypress "Enter", append a newline char to the line.  When displaying the text, split on newline. <a href="https://codesandbox.io/s/nervous-morning-oq3v7" rel="nofollow noreferrer">CodeSandbox example, listen for keycode</a></li>
</ol>

<pre><code>function App() {
  const [text, setText] = React.useState("");

  function handleChange(e) {
    if (e.key === "Enter") {
      setText(`${e.target.value}\n`);
    }
    setText(e.target.value);
  }

  return (
    &lt;div&gt;
      &lt;TextArea
        rows={4}
        value={text}
        onChange={handleChange}
        onPressEnter={handleChange}
      /&gt;

      {text.length &gt; 0 &amp;&amp; text.split("\n").map((l, i) =&gt; &lt;p key={i}&gt;{l}&lt;/p&gt;)}
    &lt;/div&gt;
  );
}
</code></pre>

<ol start="2">
<li>Use <code>pre</code> HTML tag.  This is simple, however it renders the text as a monospace font by default. <a href="https://codesandbox.io/s/gifted-kalam-4uyhm" rel="nofollow noreferrer">CodeSandbox example, using pre tag</a></li>
</ol>

<pre><code>function App() {
  const [text, setText] = React.useState("");

  function handleChange(e) {
    setText(e.target.value);
  }

  return (
    &lt;div&gt;
      &lt;TextArea
        rows={4}
        value={text}
        onChange={handleChange}
        onPressEnter={handleChange}
      /&gt;

      &lt;pre&gt;{text}&lt;/pre&gt;
    &lt;/div&gt;
  );
}
</code></pre>


blocks|key|2371080|text|正如AdityaSrivast所说，您可以使用预标记。但是要将文本包装起来，您应该在CSS下面添加。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2371081|<style>
+++++pre+{
++++++++overflow-x:+auto;
++++++++white-space:+pre-wrap;
++++++++white-space:+-moz-pre-wrap;
++++++++white-space:+-pre-wrap;
++++++++white-space:+-o-pre-wrap;
++++++++word-wrap:+break-word;
+++++}
++</style>|code-block|syntax|javascript|2371082|否则，文本将显示为一行。|2371083|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>As AdityaSrivast said, you can use pre tags. But to wrap the text you should add below CSS.</p>
<pre><code>&lt;style&gt;
     pre {
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
     }
  &lt;/style&gt;
</code></pre>
<p>Otherwise, texts will show as one line.</p>


<p>I am using TextArea of AntDesign, when I input, say, 2-3 paragraphs in it, and hit enter to display it in a row, but it displays everything in one paragraph. I want the exact formatting that I did while entering in the text area. How to do that?</p>

<p>I am simply using Text area -</p>

<pre><code>  &lt;TextArea
     rows={2}
     style={{ width: "100%" }}
     defaultValue={this.state.value}
     onClick={this.handleValue}
  /&gt;
</code></pre>

<p>and to display on right side-</p>

<pre><code>  &lt;div&gt;{this.state.value}&lt;/div&gt;
</code></pre>

<p>EXPECTED</p>

<pre><code>Hey, how are you doing today? I am fine. i hope your are fine

do give me a call when you are free.

contact - 1234567890
</code></pre>

<p>WHAT I GET IN RESULT</p>

<pre><code>Hey, how are you doing today? I am fine. i hope your are fine do give me a call when you are free. contact - 1234567890
</code></pre>


I want the text that is input in TextArea in same format

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用的是TextArea of AntDesign，当我在其中输入2-3段并按enter键显示它时，它会在一个段落中显示所有内容。我想要在文本区域中输入时所做的确切格式设置。怎么做？我只是用文字区-  <TextArea     rows={2}     style={{ width: "100%" }}     d...

问我想要以相同格式以TextArea输入的文本
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想要以相同格式以TextArea输入的文本EN