textarea输入框的内容如何原模原样的展示出来？（适用于一些antd design框架以及element ui框架）-Toy模板网

这篇具有很好参考价值的文章主要介绍了textarea输入框的内容如何原模原样的展示出来？（适用于一些antd design框架以及element ui框架）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

笔者在工作的时候遇到了一个问题，在写一个新建页面的需求的时候，遇到一个问题：新建页面的文本框里用户输入的内容格式，前端要返回这些数据给后端，后端又不想做空格以及换行的判断处理，，所以后端在返回给前端的数据其实是一大串没有格式的字符串，但是又要求在详情页展示用户输入时候的原格式文本。

其实这个实现起来很简单，现在html和css越来越强大，能实现的功能也越来越多，html提供了一个pre标签，css同样为pre标签提供了pre-wrap属性(当文本框的长度超过显示区域的时候，文本会溢出的时候使用)

下面来看例子：

1、这是不用pre标签的时候展示的样子，可以看到用户输入的格式展示的时候完全是乱的。

textarea输入信息,html5,css3,前端框架

文章来源地址https://www.toymoban.com/news/detail-530898.html

2、pre元素的作用--保证文本格式的正常显示

textarea输入信息,html5,css3,前端框架

<!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属性作用--超出文本区域自动换行

textarea输入信息,html5,css3,前端框架

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

到了这里，关于textarea输入框的内容如何原模原样的展示出来？（适用于一些antd design框架以及element ui框架）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！