使用文本区域在多行中显示文本[重复]

Posted 2023-05-07

【中文标题】使用文本区域在多行中显示文本[重复]

【英文标题】：display text in multiline using text area [duplicate]

【发布时间】：2013-03-31 11:05:24

【问题描述】：

我在 html 中使用文本区域标签，我必须在单独的行中打印成分，但即使使用回车键，当我将文本区域的值传递给变量并打印它时，它也会出现在一行中。

以下是我的代码 sn-p ：

<div data-role="fieldcontain">
    <label for="name">Ingredients</label>
    <textarea rows="4" cols="50" id="new_ingredients">

    </textarea>
</div>

$( '#new_recipe' ).live( 'pagebeforeshow',function(event)
    var temp1 = $("#new_ingredients").val();
    $("#testing").text(temp1);
);

<div data-role="page" id="new_recipe">
    <div class="content" id="testing" ></div>
</div>

请帮助我了解当用户按下回车键时如何获取不同行中的数据。提前谢谢。

【问题讨论】：

仅供参考，live() 已弃用当前版本api.jquery.com/live

看看这个：***.com/questions/863779/…

【参考方案1】：

使用这个：

$("#testing").html(temp1.replace(/\n\r?/g, "<br />"));

在文本区域中按“enter”键表示的字符用“\n”表示（有时也用\r 表示）。但是当以 HTML 显示时，它们在视觉上只是一个空格。要显示这些换行符，需要将它们替换为 HTML 等效元素 - <br /> 元素。

由于现在将<br /> 元素添加到#testing 元素的内容中，因此您需要使用.html()，而不是.text()。否则，HTML 会被转义，无法正常显示。

演示： http://jsfiddle.net/Wkbrn/2/

【讨论】：

@knut 我尝试使用替换功能，但它在 div 内容中显示 标记以及字符串，并且仍然没有出现在单独的行中。

@user2185012 你有没有像我建议的那样使用$("#testing").html() 而不是$("#testing").text()？这是正确显示<br /> HTML 所必需的，我在答案中进行了解释

@lan 非常感谢。它成功了 :)

@knut：是的，我没有使用 .html，因此它不起作用。谢谢你:)

为了更好地覆盖使用replace(/(\n|\r|\r\n)/g, '<br>') 而不仅仅是/\n\r?/g

【参考方案2】：

试试这个

<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<div data-role="fieldcontain">
        <label for="name">Ingredients</label>
        <textarea rows="4" cols="50" id="new_ingredients">ingredient1&#13;&#10;ingredient2&#13;&#10
        </textarea>
        </div>

<script>
$(document).ready(function()
var temp1 = $("#new_ingredients").html().replace(/\n/g,"<br>");;
 $("#testing").html(temp1);
)
</script>

<div data-role="page" id="new_recipe">
<div class="content" id="testing" ></div></div>

我修改了脚本只是为了测试