摘要:顯示的時候,從后臺獲取到文本之后,去掉文中的所有空格,然后顯示在標簽里面。這里我用一個小例子來示意一下在各種情況下的保存和顯示。首先嘗試,去掉所有的空格,首先想到的就是方法。
當我們使用 textarea 在前臺編輯文字,并用 js 提交到后臺的時候,空格和換行是我們最需要考慮的問題。在textarea 里面,空格和換行會被保存為/s和/n,如果我們前臺輸入和前臺顯示的文字都是在 textarea 里面,其實并不需要做任何處理,你在 textarea 里面編寫的樣式會按照你之前編輯時候的樣式,正確的顯示出來。
那么如果你需要 textarea 編輯提交的文字,從后臺返回之后,不是顯示在 textarea 里面,那么就需要考慮處理空格和換行啦。
其實之前在接觸的時候,完全沒有考慮過這些問題,也是因為最近做的項目里面有一個這樣子的需求,要求用戶在 textarea 輸入文字,提交之后以文章的格式顯示在頁面上。不管用戶輸入的時候打了多少空格,默認每段文字都只縮進2個字符,且要考慮用戶上傳的詩歌形式,也就是每個段落之間可能有兩行空白??偠灾痪湓捒偨Y(jié)呢,就是—去掉用戶的輸入的空格,保留段落之間的換行。
那么我最終的做法就是,在保存的時候還是不做任何處理,直接保存到后臺。顯示的時候,從后臺獲取到文本之后,去掉文中的所有空格,然后顯示在標簽里面。
這里我用一個小例子來示意一下textarea在各種情況下的保存和顯示。首先創(chuàng)建一個簡單的 html 頁面,為了方便獲取數(shù)據(jù)和顯示,我引入 vue 來處理數(shù)據(jù),給提交按鈕綁定一個點擊事件,點擊確定之后,顯示在下面?;镜捻撁娼Y(jié)構(gòu)和 js 如下:
不處理空格和換行 顯示在 textarea 里面// js部分 const vm = new Vue({ el:"#app", data:{ text1:"", text2:"" }, methods:{ submitText(){ this.text2 = this.text1; } } })請輸入內(nèi)容:
顯示的內(nèi)容:
這一步就很簡單了,直接點擊提交,可以看到效果,如下圖。在未做任何處理的情況下,保留了所有的空格和換行,適合保存再編輯。
不處理空格和換行 顯示在 div 里面把剛剛第二個 textarea 替換成 div ,效果如下圖??梢钥吹娇崭窈蛽Q行符都沒有被處理出來,直接被忽略掉了。
不處理空格和換行 顯示在 pre 標簽里面請輸入內(nèi)容:
顯示的內(nèi)容:
{{text2}}
將 div 替換成 pre 標簽,將提交的文本顯示在 pre 標簽里面。pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符,他比較常見的應(yīng)用就是用來顯示代碼,在技術(shù)網(wǎng)站和博客的頁面里面,pre 標簽都是用來包裹代碼塊的。
可以從下圖的效果看出,pre 標簽也可以完全實現(xiàn)保留用戶所輸入的空格和換行,看上去似乎能夠達到我的基本需求了。那么接下來的問題就是,如何去掉空格,并且實現(xiàn)自動縮進2個字符。
請輸入內(nèi)容:
顯示的內(nèi)容:
{{text2}}
那么我試試直接給 pre 標簽設(shè)置 css 屬性text-index:2em;?這樣能夠?qū)崿F(xiàn)需求嗎?答案顯然是不行,因為這個屬性規(guī)定的是塊級元素首行文本的縮進,而這里從始至終都只有一個塊級元素 pre ,顯然是不能實現(xiàn)。而且我們還要考慮到用戶自己輸入的空格。
替換空格保留換行既然直接顯示行不通,看來還是必須要處理文本,那我們就處理一下。首先嘗試,去掉所有的空格,首先想到的就是trim()方法。思路就是,以換行符為分割,獲取到每一段文本,然后用trim()方法去掉文本前后的空格,用
標簽把每段文字包裹起來,再把每一段用
換行標簽拼接起來。同時,不用pre標簽來顯示文本了,直接將處理過后的的 html 片段插入到 div 標簽里面,這里用到的是 vue 的 v-html 屬性。
// js部分 submitText(){ let arr = []; this.text1.split(" ").forEach(item=>arr.push(`請輸入內(nèi)容:
顯示的內(nèi)容:
${item.trim()}
`)); this.text2 = arr.join("
"); }
如下圖所示,基本實現(xiàn)自動縮進和保留換行啦。
下面我們輸入一段詩歌,加上一些樣式,看看最終效果如何:
再輸入一段文章,輸入的時候打亂文章的縮進,可以看到不管我們?nèi)绾慰s進,顯示效果始終都是縮進兩個字符,那么就實現(xiàn)需求啦!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52804.html
摘要:顯示的時候,從后臺獲取到文本之后,去掉文中的所有空格,然后顯示在標簽里面。這里我用一個小例子來示意一下在各種情況下的保存和顯示。首先嘗試,去掉所有的空格,首先想到的就是方法。 當我們使用 textarea 在前臺編輯文字,并用 js 提交到后臺的時候,空格和換行是我們最需要考慮的問題。在textarea 里面,空格和換行會被保存為/s和/n,如果我們前臺輸入和前臺顯示的文字都是在 te...
摘要:關(guān)于內(nèi)聯(lián)元素之前討論的多是塊級元素,而沒有考慮到內(nèi)聯(lián)元素的情況。但巧合的是,在普通流定位中,內(nèi)聯(lián)元素寬度和高度規(guī)則卻和塊級元素絕對定位差不多,都只受內(nèi)容大小影響。 我們知道,元素在沒有設(shè)置寬高的情況下,默認的寬高值都為auto。而這個auto到底是如何讓元素自動擁有寬高的呢,也就是說,元素的寬度和高度到底會受到什么因素的影響?本文將通過一個例子來對這一問題一探究竟,HTML結(jié)構(gòu)和初始c...
摘要:雖然效果一樣,但是這兩種換行的方式使用起來卻不同。使用換行這種方式用起來比較坑,所以本文章的重點就是這一部分。因為之前知道彈框中要實現(xiàn)換行,只能通過的方式,而不能通過的方式。在元素上使用等方式,發(fā)現(xiàn)都是可以實現(xiàn)換行的。 前言 最近遇到這樣一個需求:需要在頁面中顯示一段第三方文本信息。這些文本完全由第三方自己定義,我們負責(zé)顯示在頁面即可,第三方要求這些文本需要換行顯示即可。 我們都知道在...
摘要:一個長單詞超出整個容器寬度時是否換行必須注意到,這是一個長單詞便超出容器寬度的情況,而且只需考慮英文,中文沒有此特性。規(guī)定如何處理內(nèi)容溢出容器屬性作用于型元素上。 前言 文本方面的CSS內(nèi)容不少,但只要是用過一下office word來編輯過文章的童鞋都能輕易理解其中的大部分。那么,今天僅僅來談?wù)勂渲凶顝?fù)雜的部分——文本格式。 處理換行、空格和Tab:white-space 眾所周知,...
摘要:一現(xiàn)象描述真正意義上的水平呈現(xiàn)的元素間,換行顯示或者空格隔開的情況下會有間距,這是因為瀏覽器在解析時,會將換行等讀取成一個空格導(dǎo)致。鏈接鏈接鏈接鏈接給父級設(shè)置,然后再在子元素中設(shè)置我們的字體大小,這樣也可以去掉元素間的間距。一、現(xiàn)象描述 真正意義上的inline-block水平呈現(xiàn)的元素間,換行顯示或者空格隔開的情況下會有間距,這是因為瀏覽器在解析時,會將換行等讀取成一個空格導(dǎo)致。 二、...
閱讀 3556·2023-04-25 16:35
閱讀 686·2021-10-11 11:09
閱讀 6137·2021-09-22 15:11
閱讀 3352·2019-08-30 14:03
閱讀 2590·2019-08-29 16:54
閱讀 3343·2019-08-29 16:34
閱讀 3042·2019-08-29 12:18
閱讀 2113·2019-08-28 18:31