textarea換行_在textarea中如何換行的實現總匯

html的textarea內容顯示的時候怎么換行？輸入的時候換了行，但是讀取出來的時候是連在一起的，要怎么才可以顯示換行？

 

方式一：利用pre

1、在textarea輸出的div中添加如下css樣式：

.content {
   white-space: pre;
}

　　

2、利用<pre>標簽來輸出textarea的內容：

<pre>這是textarea中的內容....</pre>

　　

該方式的優缺點：

優點: 

不需要區別瀏覽器, 正則校驗替換, 保存輸入的符號  

缺點: 

但是超出長度部分不會折行顯示, 在同行顯示, 需要添加 white-space的樣式

white-space: pre-wrap || pre-line;

　　

pre 標簽樣式, 可能會改變預期樣式 字體大小, 顏色, 字體類型等, 需要全局設置初始值

攝圖網https://www.wode007.com/sites/73204.html VJ師網https://www.wode007.com/sites/73287.html

方式二：將 \n\r 替換成 br 標簽

利用正則，寫法如下：

input.replace(/\r/ig, '').replace(/\n/ig, '<br/>')

　　

注意: 需要 dangerouslySetInnerhtml: { \_\_html: text} 解析。

該方式的優缺點：  

優點:  

可設置自動換行，可不修改樣式, 如果統一處理包裹標簽有可能會影響 

缺點:  

dangerouslySetInnerhtml 有 XSS 漏洞, 建議使用 html escape 處理

import _ from 'lodash';
 
const createhtml = encodedhtml => ({
    __html: encoded(createhtml)
});
 
function encoded(html) {
    return _.escape(html).replace(/\r/g, '').replace(/\n/g, '<br/>')
}
 
export function newlineReplaceBr(input) {
    if (input) {
        return h.span({
            dangerouslySetInnerHTML: createHtml(input)
        })
    }
    else {
        return ''
    }
}

　　

 

方式三：直接在渲染標簽元素上添加 white-space: pre-wrap | pre-line | pre  

所有瀏覽器都支持 white-space 屬性。white-space 屬性設置如何處理元素內的空白, 換行

pre-wrap 保留空白符序列，但是正常地進行換行
pre-line 合並空白符序列，但是保留換行符
pre: 空白會被瀏覽器保留, 在遇到換行符或者<br>元素時才會換行, 類似 HTML 中的 <pre> 標簽