成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

由一個(gè)項(xiàng)目需求引發(fā)的 - textarea中的換行和空格

TNFE / 608人閱讀

摘要：顯示的時(shí)候，從后臺(tái)獲取到文本之后，去掉文中的所有空格，然后顯示在標(biāo)簽里面。這里我用一個(gè)小例子來(lái)示意一下在各種情況下的保存和顯示。首先嘗試，去掉所有的空格，首先想到的就是方法。

當(dāng)我們使用 textarea 在前臺(tái)編輯文字，并用 js 提交到后臺(tái)的時(shí)候，空格和換行是我們最需要考慮的問(wèn)題。在textarea 里面，空格和換行會(huì)被保存為/s和/n，如果我們前臺(tái)輸入和前臺(tái)顯示的文字都是在 textarea 里面，其實(shí)并不需要做任何處理，你在 textarea 里面編寫(xiě)的樣式會(huì)按照你之前編輯時(shí)候的樣式，正確的顯示出來(lái)。

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

其實(shí)之前在接觸的時(shí)候，完全沒(méi)有考慮過(guò)這些問(wèn)題，也是因?yàn)樽罱龅捻?xiàng)目里面有一個(gè)這樣子的需求，要求用戶(hù)在 textarea 輸入文字，提交之后以文章的格式顯示在頁(yè)面上。不管用戶(hù)輸入的時(shí)候打了多少空格，默認(rèn)每段文字都只縮進(jìn)2個(gè)字符，且要考慮用戶(hù)上傳的詩(shī)歌形式，也就是每個(gè)段落之間可能有兩行空白?？偠灾痪湓?huà)總結(jié)呢，就是—去掉用戶(hù)的輸入的空格，保留段落之間的換行。

那么我最終的做法就是，在保存的時(shí)候還是不做任何處理，直接保存到后臺(tái)。顯示的時(shí)候，從后臺(tái)獲取到文本之后，去掉文中的所有空格，然后顯示在

標(biāo)簽里面。


這里我用一個(gè)小例子來(lái)示意一下textarea在各種情況下的保存和顯示。首先創(chuàng)建一個(gè)簡(jiǎn)單的 html 頁(yè)面，為了方便獲取數(shù)據(jù)和顯示，我引入 vue 來(lái)處理數(shù)據(jù)，給提交按鈕綁定一個(gè)點(diǎn)擊事件，點(diǎn)擊確定之后，顯示在下面。基本的頁(yè)面結(jié)構(gòu)和 js 如下：



    
請(qǐng)輸入內(nèi)容：

    
    
    
顯示的內(nèi)容：

    



// js部分
const vm = new Vue({
    el:"#app",
    data:{
        text1:"",
        text2:""
    },
    methods:{
        submitText(){
            this.text2 = this.text1;
        }
    }
})

不處理空格和換行 顯示在 textarea 里面

這一步就很簡(jiǎn)單了，直接點(diǎn)擊提交，可以看到效果，如下圖。在未做任何處理的情況下，保留了所有的空格和換行，適合保存再編輯。



不處理空格和換行 顯示在 div 里面

把剛剛第二個(gè) textarea 替換成 div ，效果如下圖?？梢钥吹娇崭窈蛽Q行符都沒(méi)有被處理出來(lái)，直接被忽略掉了。



    
請(qǐng)輸入內(nèi)容：

    
    
    
顯示的內(nèi)容：

    
{{text2}}





不處理空格和換行 顯示在 pre 標(biāo)簽里面

將 div 替換成 pre 標(biāo)簽，將提交的文本顯示在 pre 標(biāo)簽里面。pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符，他比較常見(jiàn)的應(yīng)用就是用來(lái)顯示代碼，在技術(shù)網(wǎng)站和博客的頁(yè)面里面，pre 標(biāo)簽都是用來(lái)包裹代碼塊的。


可以從下圖的效果看出，pre 標(biāo)簽也可以完全實(shí)現(xiàn)保留用戶(hù)所輸入的空格和換行，看上去似乎能夠達(dá)到我的基本需求了。那么接下來(lái)的問(wèn)題就是，如何去掉空格，并且實(shí)現(xiàn)自動(dòng)縮進(jìn)2個(gè)字符。



    
請(qǐng)輸入內(nèi)容：

    
    
    
顯示的內(nèi)容：

    
{{text2}}




那么我試試直接給 pre 標(biāo)簽設(shè)置 css 屬性text-index:2em;？這樣能夠?qū)崿F(xiàn)需求嗎？答案顯然是不行，因?yàn)檫@個(gè)屬性規(guī)定的是塊級(jí)元素首行文本的縮進(jìn)，而這里從始至終都只有一個(gè)塊級(jí)元素 pre ，顯然是不能實(shí)現(xiàn)。而且我們還要考慮到用戶(hù)自己輸入的空格。

替換空格保留換行

既然直接顯示行不通，看來(lái)還是必須要處理文本，那我們就處理一下。首先嘗試，去掉所有的空格，首先想到的就是trim()方法。思路就是，以換行符為分割，獲取到每一段文本，然后用trim()方法去掉文本前后的空格，用 
 標(biāo)簽把每段文字包裹起來(lái)，再把每一段用
換行標(biāo)簽拼接起來(lái)。同時(shí)，不用pre標(biāo)簽來(lái)顯示文本了，直接將處理過(guò)后的的 html 片段插入到 div 標(biāo)簽里面，這里用到的是 vue 的 v-html 屬性。



    
請(qǐng)輸入內(nèi)容：

    
    
    
顯示的內(nèi)容：

    




// js部分
submitText(){
    let arr = [];
    this.text1.split("
").forEach(item=>arr.push(`
${item.trim()}
`));
    this.text2 = arr.join("
");
}


如下圖所示，基本實(shí)現(xiàn)自動(dòng)縮進(jìn)和保留換行啦。




下面我們輸入一段詩(shī)歌，加上一些樣式，看看最終效果如何：




再輸入一段文章，輸入的時(shí)候打亂文章的縮進(jìn)，可以看到不管我們?nèi)绾慰s進(jìn)，顯示效果始終都是縮進(jìn)兩個(gè)字符，那么就實(shí)現(xiàn)需求啦！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96636.html

相關(guān)文章

  • 由一個(gè)項(xiàng)目需求引發(fā)的 - textarea中的換行和空格

    摘要：顯示的時(shí)候，從后臺(tái)獲取到文本之后，去掉文中的所有空格，然后顯示在標(biāo)簽里面。這里我用一個(gè)小例子來(lái)示意一下在各種情況下的保存和顯示。首先嘗試，去掉所有的空格，首先想到的就是方法。 當(dāng)我們使用 textarea 在前臺(tái)編輯文字，并用 js 提交到后臺(tái)的時(shí)候，空格和換行是我們最需要考慮的問(wèn)題。在textarea 里面，空格和換行會(huì)被保存為/s和/n，如果我們前臺(tái)輸入和前臺(tái)顯示的文字都是在 te...

    Cheriselalala 評(píng)論0 收藏0

  • 元素auto寬高的影響因素

    摘要：關(guān)于內(nèi)聯(lián)元素之前討論的多是塊級(jí)元素，而沒(méi)有考慮到內(nèi)聯(lián)元素的情況。但巧合的是，在普通流定位中，內(nèi)聯(lián)元素寬度和高度規(guī)則卻和塊級(jí)元素絕對(duì)定位差不多，都只受內(nèi)容大小影響。 我們知道，元素在沒(méi)有設(shè)置寬高的情況下，默認(rèn)的寬高值都為auto。而這個(gè)auto到底是如何讓元素自動(dòng)擁有寬高的呢，也就是說(shuō)，元素的寬度和高度到底會(huì)受到什么因素的影響？本文將通過(guò)一個(gè)例子來(lái)對(duì)這一問(wèn)題一探究竟，HTML結(jié)構(gòu)和初始c...

    crelaber 評(píng)論0 收藏0

  • 說(shuō)一說(shuō)“換行”踩的坑

    摘要：雖然效果一樣，但是這兩種換行的方式使用起來(lái)卻不同。使用換行這種方式用起來(lái)比較坑，所以本文章的重點(diǎn)就是這一部分。因?yàn)橹爸缽椏蛑幸獙?shí)現(xiàn)換行，只能通過(guò)的方式，而不能通過(guò)的方式。在元素上使用等方式，發(fā)現(xiàn)都是可以實(shí)現(xiàn)換行的。 前言 最近遇到這樣一個(gè)需求：需要在頁(yè)面中顯示一段第三方文本信息。這些文本完全由第三方自己定義，我們負(fù)責(zé)顯示在頁(yè)面即可，第三方要求這些文本需要換行顯示即可。 我們都知道在...

    objc94 評(píng)論0 收藏0

  • 談?wù)勅绾斡肅SS處理文本格式

    摘要：一個(gè)長(zhǎng)單詞超出整個(gè)容器寬度時(shí)是否換行必須注意到，這是一個(gè)長(zhǎng)單詞便超出容器寬度的情況，而且只需考慮英文，中文沒(méi)有此特性。規(guī)定如何處理內(nèi)容溢出容器屬性作用于型元素上。 前言 文本方面的CSS內(nèi)容不少，但只要是用過(guò)一下office word來(lái)編輯過(guò)文章的童鞋都能輕易理解其中的大部分。那么，今天僅僅來(lái)談?wù)勂渲凶顝?fù)雜的部分——文本格式。 處理?yè)Q行、空格和Tab：white-space 眾所周知，...

    source 評(píng)論0 收藏0

  • 去除inline-block元素間的間距

    摘要：一現(xiàn)象描述真正意義上的水平呈現(xiàn)的元素間，換行顯示或者空格隔開(kāi)的情況下會(huì)有間距，這是因?yàn)闉g覽器在解析時(shí)，會(huì)將換行等讀取成一個(gè)空格導(dǎo)致。鏈接鏈接鏈接鏈接給父級(jí)設(shè)置，然后再在子元素中設(shè)置我們的字體大小，這樣也可以去掉元素間的間距。一、現(xiàn)象描述 　　真正意義上的inline-block水平呈現(xiàn)的元素間，換行顯示或者空格隔開(kāi)的情況下會(huì)有間距，這是因?yàn)闉g覽器在解析時(shí)，會(huì)將換行等讀取成一個(gè)空格導(dǎo)致。 二、...

    levius 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<