需求:在文本域中输入文字,回车开始输入下一行文字,点击按钮将信息输出到div中,并还是换行输出。
原因:浏览器会将文本里面的换行符(\n)和回车符(\r),替换成空格。
方案一: 使用js将字符串的换行符\r\n,转换成html中的换行<br/>
<textarea name="" id="content" cols="30" rows="10"></textarea>
<div id="info"></div>
<button id="btn">按钮</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var btn = $("#btn");
btn.on('click', function () {
var val = $("#content").val();
val = val.replace(/\r\n/g, '<br/>'); //IE9、FF、chrome
val = val.replace(/\n/g, '<br/>'); //IE7-8
$("#info").html(val);
//上边的后三步与下边代码效果相同
//$("#info")[0].innerText = val;
})
</script>
方案二:给展示信息的div添加css样式:white-space: pre;
-
缺点: 超出父元素的内容会隐藏
-
white-space: pre;
保留换行符和(多余的)空格,在遇到换行符或者<br>元素时才会换行。 -
white-space: pre-wrap;
保留换行符和(多余的)空格,文本除了遇到换行符或者<br>元素外,也会在合适的位置自动换行。 -
white-space: pre-line;
保留换行符,连续的空白符会被合并,文本除了遇到换行符或者<br>元素外,也会在合适的位置自动换行。
<textarea name="" id="content" cols="30" rows="10"></textarea>
<div id="info" style="white-space: pre;"></div>
<button id="btn">按钮</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var btn = $("#btn");
btn.on('click', function () {
var val = $("#content").val();
$("#info").text(val);
})
</script>
方案二:使用pre标签
- 注意:HTML 标签在<pre>里面还是起作用的。
<textarea name="" id="content" cols="30" rows="10"></textarea>
<pre id="info"></pre>
<button id="btn">按钮</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var btn = $("#btn");
btn.on('click', function () {
var val = $("#content").val();
$("#info").text(val);
})
</script>