使用 Javascript 将文本添加到文本区域答案

【问题标题】：Add text to a textarea with Javascript使用 Javascript 将文本添加到文本区域
【发布时间】：2017-06-11 23:17:09
【问题描述】：

我再次遇到了 Javascript 的问题，但这次更复杂。
我正在尝试制作一个小的 Javascript 文本编辑器，基本上这是一个实验，一个测试，事情应该很简单，我有一个 <h1> html 元素和一个 <p> html 元素，它们都有更改，因为用户在 <input type="text" /> 元素和 <textarea></textarea> 上写字。
现在，一切正常，但有一个问题，为了在行之间留出空格，用户不能只按 Enter，而是当然需要使用<br /> html 标记。
所以我的想法是制作一个小按钮，允许用户通过按下该按钮来添加此标记。
而 Javascript 只是制作实际文本的变量，保存并在其末尾添加 <br /> 结果应该是用户编写的文本加上 break html 标记。
如果 textarea 为空并且您从未在其上写过任何内容，那么这项工作，它甚至可以工作 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>

感谢您的宝贵时间，并为我糟糕的英语感到抱歉。

【问题讨论】：

标签： javascript text editor

【解决方案1】：

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

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

用途：

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

【讨论】：

【解决方案2】：

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

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

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

如果我正确理解了您的问题。

Here is the code running

【讨论】：

问题不在于当我点击“保存”时
不工作问题是如果我在文本区域写东西，按钮不会写
，而是如果我刷新页面并单击按钮 br 首先写任何东西，它会起作用，关于为什么会发生这种情况的任何想法？谢谢。尝试运行代码 sn-p 看看实际问题是什么。
在文本区域中输入任何内容并按Enter 作为新行时，此解决方案应该可以工作，这样您就可以完全摆脱“br”按钮。据我了解，这是您的问题，对吗？另外，
是顺便插入的，但由于它是 html 标签，因此它不可见。您可以在浏览器中检查元素并确认它已添加。我正在更新答案以添加不带 br 按钮的完整工作代码。如果这不是您想要的，请告诉我。