我想要在 TextArea 中以相同格式输入的文本

Posted 2023-05-07

【中文标题】我想要在 TextArea 中以相同格式输入的文本

【英文标题】：I want the text that is input in TextArea in same format

【发布时间】：2019-12-09 00:49:53

【问题描述】：

我正在使用 AntDesign 的 TextArea，当我在其中输入 2-3 个段落时，然后按 Enter 以连续显示它，但它在一个段落中显示所有内容。我想要在文本区域中输入时所做的确切格式。该怎么做？

我只是使用文本区域-

  <TextArea
     rows=2
     style= width: "100%" 
     defaultValue=this.state.value
     onClick=this.handleValue
  />

并显示在右侧-

  <div>this.state.value</div>

预期

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

我得到的结果

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

【问题讨论】：

它只是我正在使用的 TextArea...我在@Peter 上方添加了它

在这个问题上您需要更多帮助吗？请让我知道或将我的答案标记为已接受。谢谢。

【参考方案1】：

您可以使用pre 标签来显示输入的内容。

我使用vanilla JS 创建了以下示例。您可以在react 中实现相同的功能。

<textarea id="tarea" rows="2" style="width: 100%" onclick="handleValue()">
</textarea>
<p id="display"></p>
<script>
  function handleValue() 
    var tarea = document.getElementById('tarea');
    var disp = document.getElementById('display');
    disp.innerhtml = '<pre>' + tarea.value + '</pre>';
  
</script>

例如：

<pre>this.state.value</pre> 应该做的伎俩。

希望这会有所帮助！干杯。

【参考方案2】：

所以我认为没有一种简单的方法可以做到这一点（即使这样做的方法并不难）。

您需要做的是获取TextArea 的每一行，您应该可以通过以下方式获取：

var textArea = document.getElementById("my-text-area");
var arrayOfLines = textArea.value.split("\n");

来源：https://***.com/questions/9196954/how-to-read-line-by-line-of-a-text-area-html-tag

一旦你有了arrayOfLines，你就可以输出文本，就像输入了一个小的for()循环一样。

【讨论】：

不是数组，我也必须为此更改后端

【参考方案3】：

下面提供了此任务的两个选项：

在按键“Enter”时，将换行符附加到该行。显示文本时，在换行符处拆分。 CodeSandbox example, listen for keycode

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>
  );

使用pre HTML 标签。这很简单，但是默认情况下它将文本呈现为等宽字体。 CodeSandbox example, using pre tag

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>
  );

【参考方案4】：

正如 AdityaSrivast 所说，您可以使用 pre 标签。但是要包装文本，您应该在 CSS 下方添加。

<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>

否则，文本将显示为一行。

【参考方案5】：

在我看来，问题出在style= width: "100%" 。尝试限制 TextAreas 的宽度。例如：style= width: "100px"