使用 JavaScript 将文本添加到文本区域

Question

我再次遇到 JavaScript 的问题，但这次更复杂。

我正在尝试制作一个 JavaScript 文本编辑器。基本上这是一个实验，一个测试，事情应该很容易。我有一个 <h1> HTML 元素和一个 <p> HTML 元素，当用户在 <input type="text" /> 元素和一个 <textarea></textarea>.

现在，一切正常，但有一个问题。为了在行之间制作一个space，用户不能只按Enter，当然需要使用<br /> HTML标签。

所以我的想法是制作一个小按钮，允许用户通过按下该按钮来添加此标签。

而JavaScript只是将实际文本作为一个变量，保存它并在它的末尾添加<br />。结果应该是用户编写的文本加上 break HTML 标签。

如果文本区域为空并且您从未在其上写过任何内容，则此方法有效。它可以工作，甚至可以工作 10 或 20 次，但如果你在上面写东西，它就会停止工作，即使你删除所有文本。下面的代码有什么问题？

<html>
    <head>
        <title>Text editor</title>
        <meta charset="utf-8" />
        <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">

        <style>
            .title {
                font-family: roboto;
                text-align: center;
            }
            .text {
                font-family: roboto slab;
                text-align: justify;
                margin-bottom: 40px;
            }
            .container {
                width: 80%;
            }
            .textarea {
                width: 100%;
                height: 30em;
                text-indent: 0.5em;
            }
            .title_box {
                margin: 10px;
                width: 20em;
                padding: 10px;
                font-size: 1em;
            }
        </style>
    </head>

    <body>
        <center>
        <div class="container">
            <h1 class="title" id="title_space">Title of the page</h1>
            <p class="text" id="text_space">Content of the page.</p>
        </div>
        </center>
        <hr />
        <center><input type="text" class="title_box" placeholder="Title" id="title_box" /></center>
        <textarea class="textarea" id="text_box"></textarea>
        <input type="submit" value="Save" onclick="saveText()" />
        <input type="submit" value="br" onclick="br()" />

        <script>
            function saveText(){
                var title = document.getElementById("title_box").value;
                var text = document.getElementById("text_box").value;

                document.getElementById("title_space").innerHTML = title;
                document.getElementById("text_space").innerHTML = text;
            }

            function br(){
                var actualtext = document.getElementById("text_box").value;
                var processedtext = actualtext + "<br />";
                document.getElementById("text_box").innerHTML = processedtext;
            }
        </script>

    </body>
</html>

Answer 1

尝试在更改文本之前将此添加到您的 JavaScript 代码中

text = text.replace(/\r?\n/g, '<br>');

换行符是 \r\n 或 \n，而 HTML 换行符是 <br>，这就是问题所在。

这是为了防止我正确理解你的问题。

Here is the code running

Answer 2

当您更新文本区域时，而不是：

document.getElementById("text_box").innerHTML = processedtext;

使用：

document.getElementById("text_box").value = processedtext;

使用 JavaScript 将文本添加到文本区域

Add text to a textarea with JavaScript

javascript

text

editor