Question

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

如果用户按下回车键，请告诉我如何获取不同行的数据。请提前告知您。

Answer 1

使用此：

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

通过按下textarea中的“enter”键表示的字符用“\ n”表示（有时也带有\r）。但是，当以HTML格式显示时，它们仅仅意味着空间，视觉上。要显示这些换行符，需要将其替换为等效的HTML - <br />元素。

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

DEMO： http://jsfiddle.net/Wkbrn/2/

Answer 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>

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

使用文本区域在多行显示文本

2 个答案: