为什么我的脚本不使用keyup生成新行

Why does my script not make new lines using keyup?

本文关键字：keyup 新行 我的 脚本 为什么      更新时间：2023-09-26

我正在为论坛编写一个脚本，该脚本生成给定字符串的预览。

这是我的js代码

function MakePreview() {
var getText = document.getElementById('inputText').value;
document.getElementById('outputText').innerHTML = getText;}

这是我的HTML代码

<article>
    <h2>What are you doing?</h2>
    <textarea id="inputText" onkeyup="MakePreview()"></textarea>
    <br/>
    <input type="submit" class="button" value="Hello"/>
</article>
<article>
    <p id="outputText"></p>
</article>

此外，我有一个用于输入的文本区域和一个用于输出的段落。但是输出并不像文本区域那样生成新行。

通常，当字符串比给定内容的宽度长时，段落会自动换行。

有人有解决方案吗？

提前感谢

我不确定，是否有可能实现您想要的（由于字体大小和系列不同），但这个片段非常接近。

function makePreview() {
    var text = document.getElementById('inputText').value;
    document.getElementById('outputText').innerHTML = text;
}
.wrapper {
    width: 150px;
}
.wrapper textarea {
    width: 100%;
} 
#outputText {
    position: relative;
    white-space: pre-wrap;
    word-break: break-all;
    border: 1px solid #ccc;
}
<div class="wrapper">
    <textarea id="inputText" oninput="makePreview()"></textarea>
    <p id="outputText"></p>
</div>

这个想法是将textarea和p都封装在同一个父对象中，以使它们的宽度匹配。word-break: break-all和white-space: pre-wrap"复制"自动文本换行，并在textarea中向p元素输入新行。

但是，根据使用的字体系列和大小，文本可能会被剪切到不同的位置。如果在两个元素中使用相同的字体，可以得到更好的匹配。

您可以通过将段落的white-space属性设置为pre:来指示段落尊重新行字符（以及其他空格，如制表符、空格等）

function MakePreview() {
    var getText = document.getElementById('inputText').value;
    document.getElementById('outputText').innerHTML = getText;
}
#outputText {
    white-space: pre;
}
<textarea id="inputText" onkeyup="MakePreview()" rows="4" cols="20"></textarea>
<p id="outputText"></p>

在html中，多个空格被一个空格替换，因此如果您想在段落中预览，则需要用<br/> 替换换行符

function MakePreview() {
    var getText = document.getElementById('inputText').value;
    document.getElementById('outputParagraph').innerHTML = getText.replace(''n', '<br/>');
}

在您的textArea上使用wrap="hard"。如果长度大于textArea大小，这将有助于新行。对于固定的行和列，您可以在文本区域中使用rows="2" cols="20"。

相关文章：