我想要以相同格式以TextArea输入的文本
我想要以相同格式以TextArea输入的文本
提问于 2019-07-31 13:21:03
我使用的是TextArea of AntDesign，当我在其中输入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回答 5
Stack Overflow用户
回答已采纳
发布于 2019-07-31 13:43:08
您可以使用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>应该能做到这一点。
希望这能有所帮助！干杯。
Stack Overflow用户
发布于 2019-07-31 13:31:53
因此，我不认为有一种简单的方法来做到这一点(即使这样做并不难)。
您需要做的是获取TextArea的每一行，您应该能够通过这样的方法获得这样的结果：
var textArea = document.getElementById("my-text-area");
var arrayOfLines = textArea.value.split("\n");来源：https://stackoverflow.com/questions/9196954/how-to-read-line-by-line-of-a-text-area-html-tag
一旦有了arrayOfLines，就可以输出文本，就像输入了一个小的for()循环一样。
Stack Overflow用户
发布于 2019-07-31 14:03:19
以下是这项任务的两个选项：
- 在按下"Enter“键时，将一个新行字符追加到行中。当显示文本时，在换行符上拆分。CodeSandbox示例，侦听密钥代码
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>
);
}- 使用
preHTML标记。这很简单，但默认情况下，它将文本呈现为单空间字体。CodeSandbox示例，使用预标记
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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57291801
复制相关文章
相似问题
腾讯云开发者
