如何在HTML文本区域添加换行符?

2020/10/29 15:22 · javascript ·  · 0评论

我正在<textarea>用JavaScript编辑问题是当我在其中换行时,它们不会显示。我怎样才能做到这一点?

我正在获取编写函数的值,但不会产生换行符。

问题来自换行符(\n\r?)与HTML<br/>标签不同

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

更新

由于许多评论和我自己的经验告诉我,该<br>
解决方案无法按预期工作,因此这里是如何在
textarea''\ r \ n'后面添加新行的示例。

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

我决定对此进行编辑,而不是将其作为一个新问题,因为这是一个太过流行的答案,以致错误或不完整。

如果您使用常规的Java脚本,并且需要将字符串分配给文本区域值,则

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

您需要更换\n< br >\\\n

否则,它将Uncaught SyntaxError: Unexpected token ILLEGAL在所有浏览器上显示。

也许有人觉得这很有用:

我遇到了从服务器变量传递到javascript变量的换行符问题,然后javascript将它们写到了textarea(使用基因敲除.js值绑定)。

解决方案是两次转义新行:

orginal.Replace("\r\n", "\\r\\n")

在服务器端,因为仅使用一个转义字符,无法解析javascript。

您需要\n用于linebreaks内部textarea

如果要在自己的页面内显示文本,则可以使用<pre>标记。

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>

我有一个ID为#infoartist的textarea,遵循:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

在javascript代码中,我将获得textarea的值,并用<br />标记替换转义的新行(\ n \ r),例如:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

因此,如果您使用的是jquery(例如我):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

希望对您有帮助。:-)

换行符只是浏览器的空白,不会与普通空格(“”)区别对待。要换行,必须插入<BR />元素。

解决该问题的另一种尝试:在文本区域中键入文本,然后在按钮后面添加一些JavaScript,以将不可见的字符转换为可读的字符并将结果转储为DIV这将告诉您浏览器的需求。

如果只需要通过换行符将testarea的值发送到服务器,请使用nl2br

这是我为遇到的同样麻烦所做的事情。

当我将文本传递到jsp的下一页时,我将其作为textarea读取,而不是像

因此输出就如您所愿。对于其他属性,可以如下使用。

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>
本文地址:http://javascript.askforanswer.com/ruhezaihtmlwenbenquyutianjiahuanxingfu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!