您現在的位置: 365建站網 > 365學習 > textarea換行的實現方法和textarea怎么解決換行問題

textarea換行的實現方法和textarea怎么解決換行問題

文章來源:365jz.com     點擊數:2986    更新時間:2020-04-17 12:57   參與評論

textarea換行的實現方法和textarea怎么解決換行問題:

當我們使用 textarea 在前臺編輯文字,并用 js 提交到后臺的時候,空格和換行是我們最需要考慮的問題。在textarea 里面,空格和換行會被保存為/s/n,如果我們前臺輸入和前臺顯示的文字都是在 textarea 里面,其實并不需要做任何處理,你在 textarea 里面編寫的樣式會按照你之前編輯時候的樣式,正確的顯示出來。

那么如果你需要 textarea 編輯提交的文字,從后臺返回之后,不是顯示在 textarea 里面,那么就需要考慮處理空格和換行啦。

為什么會出現這個問題呢?我想預設好textarea的值,像這樣,讓用戶輸入的時候直接另起一行!

下面的方法是沒有用的。

1.企圖在HTML里面加上<br />或\r\n

<textarea cols="15" rows="8" id="Txt">To:夏爾<br /></textarea>
<textarea cols="15" rows="8" id="Txt">To:夏爾\r\n</textarea>

2.想用js給其value賦值/n的


js確實有辦法讓它換行,但是多費事啊,好了,那么答案是什么呢?


很簡單,利用html換行符&#10;或&#13;。

<textarea cols="15" rows="5">To:夏爾&#10;你好!&#13;再見!</textarea>

效果如下:

image.png


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 標簽樣式, 可能會改變預期樣式 字體大小, 顏色, 字體類型等, 需要全局設置初始值


方式二:將 \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> 標簽



如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (2986人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 男女性高爱潮视频| XXX群交| 欧美老妇牲交videos| 欧美图亚洲色另类偷偷自拍10p| 最好看的2019年中文视频| 国产午夜精华2020在线| 啦啦啦手机在线观看视频www| tube8日本videos学生| 瑜伽美女牲交大片| 女人与公拘交性视频| 黄床大片免费30分钟国产精品| 久本草在线中文字幕| 至尊龙婿叶辰萧初然全文免费| 丫头你的奶水真多| 国产私人尤物无码不卡| 男女裸体下面进入的免费视频| 四虎影在线 永久免费| 我与岳的性真实故事全文阅读| g片男a同志y免费网站| 手机看片久久国产免费| 苏玥玥马老二马强免费阅读| 成本人片在线观看| 牛牛a片视频在线观看| 对白脏话肉麻粗话视频| 免费观看大尺度激烈床吻戏视频| YoungChinese(18一25)| 60一70欧美老妇| 惩罚塞按摩棒不准取出来| 美女极度色诱视频国产www| 美女黄网18禁免费看| 老司机导航亚洲精品导航| http://www.saleairjordan.com