筆者在工作的時(shí)候遇到了一個(gè)問題，在寫一個(gè)新建頁面的需求的時(shí)候，遇到一個(gè)問題：新建頁面的文本框里用戶輸入的內(nèi)容格式，前端要返回這些數(shù)據(jù)給后端，后端又不想做空格以及換行的判斷處理，，所以后端在返回給前端的數(shù)據(jù)其實(shí)是一大串沒有格式的字符串，但是又要求在詳情頁展示用戶輸入時(shí)候的原格式文本。
其實(shí)這個(gè)實(shí)現(xiàn)起來很簡單，現(xiàn)在html和css越來越強(qiáng)大，能實(shí)現(xiàn)的功能也越來越多，html提供了一個(gè)pre標(biāo)簽，css同樣為pre標(biāo)簽提供了pre-wrap屬性(當(dāng)文本框的長度超過顯示區(qū)域的時(shí)候，文本會(huì)溢出的時(shí)候使用)
下面來看例子：
1、這是不用pre標(biāo)簽的時(shí)候展示的樣子，可以看到用戶輸入的格式展示的時(shí)候完全是亂的。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-530898.html
2、pre元素的作用--保證文本格式的正常顯示
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pre屬性</title>
<style>
#showText {
width: 400px;
min-height: 100px;
border: 1px solid #dedede;
}
</style>
</head>
<body>
<textarea class="writeArea" cols="60" rows="10"></textarea>
<button onclick="displayText()">提交</button>
<pre id="showText"></pre>
<script>
function displayText() {
document.getElementById("showText").innerHTML =
document.querySelector(".writeArea").value;
console.log(document.querySelector(".writeArea").value);
}
</script>
</body>
</html>
3、pre-wrap屬性作用--超出文本區(qū)域自動(dòng)換行
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pre屬性</title>
<style>
#showText {
width: 400px;
min-height: 100px;
border: 1px solid #dedede;
white-space: pre-wrap;
}
</style>
</head>
<body>
<textarea class="writeArea" cols="60" rows="10"></textarea>
<button onclick="displayText()">提交</button>
<pre id="showText"></pre>
<script>
function displayText() {
document.getElementById("showText").innerHTML =
document.querySelector(".writeArea").value;
console.log(document.querySelector(".writeArea").value);
}
</script>
</body>
</html>
?文章來源：http://www.zghlxwxcb.cn/news/detail-530898.html
?
到了這里，關(guān)于textarea輸入框的內(nèi)容如何原模原樣的展示出來？（適用于一些antd design框架以及element ui框架）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
