javascript - 在<textarea>中设置文本，包括换行符

在<textarea>中设置文本，包括换行符

时间：2018-08-11 11:39:39

标签： javascript html

我想通过js函数在</code>中设置文本；我只是将<code> innerText </code>属性设置为新值。文本为多行，应按原样显示。但是，浏览器会删除换行符，并且整个文本显示为一行：</p> <p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code”> <pre class =“ snippet-code-js lang-js prettyprint-override”> <code> document.getElementById（“ my_textarea1”）。innerText =“ foo \ nbar”; //显示为“ foobar” document.getElementById（“ my_textarea2”）。innerText =“ foo \ bar“; //显示为“ foobar” document.getElementById（“ my_textarea3”）。innerText =`foo \ 酒吧`; //再一次，“ foobar” </code> </pre> <pre class =“ snippet-code-html lang-html prettyprint-override”> <code> <textarea id =“ my_textarea1”>

在</code>中设置文本时，是否可以保留换行符？</p> </div> <div class="answer-list"> <h4>5 个答案:</h4> <div class="hr-line-dashed"></div> <p>答案 0 :(得分：3)</p> <div class="answer markdown-body"> <p>尝试一下。我使用属性“值”或“ innerHTML”或“ textContent”：</p> <p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"><code>var area = document.getElementById("my_textarea"); area.value = "foo\nbar"; var area_2 = document.getElementById("my_textarea_2"); area_2.innerHTML = "foo\nbar"; var area_3 = document.getElementById("my_textarea_3"); area_3.textContent = "foo\nbar";</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea id="my_textarea"></textarea> <textarea id="my_textarea_2"></textarea> <textarea id="my_textarea_3"></textarea></code></pre> </div> </div> <p> </p> </div> <div class="hr-line-dashed"></div> <p>答案 1 :(得分：1)</p> <div class="answer markdown-body"> <p>您可以设置文本区域的<code>value</code>，这可以与<code>\n</code>和</p>一起使用 <pre><code>`foo\ bar`; </code></pre> <p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector("#my_textarea").value = "foo\nbar"</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea id="my_textarea"></textarea></code></pre> </div> </div> <p> </p> <p>如果这对您不起作用，请使用<code>innerHTML</code>属性，方法相同：</p> <p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector("#my_textarea").innerHTML = "foo\nbar"</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea id="my_textarea"></textarea></code></pre> </div> </div> <p> </p> </div> <div class="hr-line-dashed"></div> <p>答案 2 :(得分：0)</p> <div class="answer markdown-body"> <p>使用area.innerHTML代替，innerText属性去除换行符</p> <p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"><code>var area = document.getElementById("my_textarea"); area.innerHTML = "foo\nbar";</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea id="my_textarea"> </textarea></code></pre> </div> </div> <p> </p> </div> <div class="hr-line-dashed"></div> <p>答案 3 :(得分：0)</p> <div class="answer markdown-body"> <p>您可以为此使用<code>\r</code>或<code>\n</code>。另外，HTML还支持<code>\t</code>在两个单词之间应用制表符。</p> <p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ false”> <div class =“ snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector("#my_textarea1").value = "foo\rbar" document.querySelector("#my_textarea2").value = "foo\nbar" document.querySelector("#my_textarea3").value = "foo\tbar"</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html> <html> <body> <p>New line using "\r" :</p> <textarea id="my_textarea1"></textarea> <br> <p>New line using "\n" :</p> <textarea id="my_textarea2"></textarea> <br> <p>Tab between tow words using "\t" :</p> <textarea id="my_textarea3"></textarea> </body> </html></code></pre> </div> </div> <p> </p> </div> <div class="hr-line-dashed"></div> <p>答案 4 :(得分：0)</p> <div class="answer markdown-body"> <p>根据<a href="https://html.spec.whatwg.org/multipage/dom.html#dom-innertext" rel="nofollow noreferrer">HTML Spec</a>：</p> <blockquote> <p> <code>element . innerText [ = value ]</code> </p> <p>“按原样”返回元素的文本内容。 </p> <p>可以设置，以给定值替换元素的子元素，但换行符转换为<code>br</code>元素。</p> </blockquote> <hr /> <p>意思是，你应该做的事情。正如其他答案所指出的那样，您可以使用<code>textContent</code>，<code>value</code>和<code>innerHTML</code>，所有这些都更可能起作用。</p> <p>如果您设置使用<code>textContent</code>，则有一些选项/特点，我将在下面列出：</p> <ol> <li> <p>使用ES6编译器，例如Babel.js <br/> 您可以通过在Stack Overflow的代码段编辑器中启用ES6进行测试。</p> </li> <li> <p>请参阅下面的代码片段中的（3）选项<br/> 注意：这些似乎可以在OSX Safari中使用，但不能在Google Chrome中使用</p> </li> </ol> <p> </p> <div class =“ snippet” data-lang =“ js” data-hide =“ false” data-console =“ true” data-babel =“ true”> <div class =“ snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Call toString() method document.getElementById('my_textarea').innerText = "foo\nbar".toString(); // Include the line return character document.getElementById('my_textarea2').innerText = "foo\r\nbar"; // Apparently, any whitespace or escape character will work document.getElementById('my_textarea3').innerText = "foo \nbar";</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea id="my_textarea"></textarea> <textarea id="my_textarea2"></textarea> <textarea id="my_textarea3"></textarea></code></pre> </div> </div> <p> </p> </div> </div> </div> <div class="right"> <div style="height:400px"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6263610230477973" data-ad-slot="2820756182" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div style="height:20px"></div> <div class="releated-question-wrapper"> <div class="header"> 相关问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/5583040">在html textarea中显示换行符</a> </li> <li> <a href="/q/5598271">IE9和TEXTAREA换行</a> </li> <li> <a href="/q/6329310">django处理textarea中的换行符</a> </li> <li> <a href="/q/11992596">Regl in Sublime Text：匹配任何字符，包括换行符？</a> </li> <li> <a href="/q/12924591">获取textarea的字符数，包括换行符</a> </li> <li> <a href="/q/15348586">HTML Textarea阅读换行符</a> </li> <li> <a href="/q/20181343">Textarea值与换行符</a> </li> <li> <a href="/q/46718243">在ls输出中包含换行符？</a> </li> <li> <a href="/q/48938791">将html呈现为文本，包括换行符</a> </li> <li> <a href="/q/51799278">在<textarea>中设置文本，包括换行符</a> </li> </ul> </div> <div class="releated-question-wrapper"> <div class="header"> 最新问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/68614764">我写了这段代码，但我无法理解我的错误</a> </li> <li> <a href="/q/68614678">我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？</a> </li> <li> <a href="/q/68614175">是否有可能使 loadstring 不可能等于打印？卢阿</a> </li> <li> <a href="/q/68614313">java中的random.expovariate()</a> </li> <li> <a href="/q/68614125">Appscript 通过会议在 Google 日历中发送电子邮件和创建活动</a> </li> <li> <a href="/q/68615109">为什么我的 Onclick 箭头功能在 React 中不起作用？</a> </li> <li> <a href="/q/68615123">在此代码中是否有使用“this”的替代方法？</a> </li> <li> <a href="/q/68614097">在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化</a> </li> <li> <a href="/q/68614427">每千个数字得到</a> </li> <li> <a href="/q/68615239">更新了城市边界 KML 文件的来源？</a> </li> </ul> </div> <div class=""> </div> </div> </div> <div> <script> var host = window.location.host; if (host =="www.thinbug.com"){ (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); } </script> </body> </html>