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

資訊專欄INFORMATION COLUMN

編寫自適應(yīng)高度的 textarea

only_do / 1463人閱讀

摘要：但是現(xiàn)在產(chǎn)品經(jīng)理說(shuō)了需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適應(yīng)其高度。想法很簡(jiǎn)單，當(dāng)用戶輸入的文本超過(guò)了文本框自身高度時(shí)不是會(huì)出現(xiàn)滾動(dòng)條嘛，那么自然而然就能想到這個(gè)屬性。就應(yīng)該是用戶輸入文本的真實(shí)高度，至少超過(guò)文本框既定高度時(shí)是這樣。

文本框是很常見(jiàn)的輸入控件，我相信只要寫過(guò)表單的肯定接觸過(guò) textarea 這個(gè)元素。

OK。但是現(xiàn)在產(chǎn)品經(jīng)理說(shuō)了：需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適應(yīng)其高度。

height: auto

有些初學(xué)者可能會(huì)想：自適應(yīng)高度不就是 height: auto 么？可是你想一下，一個(gè) textarea 沒(méi)有手工給它指定過(guò)樣式，不應(yīng)該就默認(rèn)是 height: auto 么？但是它還是有自己的初始高度，并沒(méi)有像一個(gè) div 那樣高度為 0。

與 div 不同，textarea 的默認(rèn)高度不是根據(jù)其內(nèi)容自適應(yīng)，而是由屬性 rows 指定，其默認(rèn)值是 2。rows 這個(gè)屬性（Attribute）只接受正整數(shù)，指定其他值瀏覽器會(huì)忽略掉其值，比如你寫 rows="auto" 那么 rows 就是 2，rows="0" 也是 2。

所以指定 height: auto 是行不通的，height 屬性必須人工指定其值。

scrollHeight

遇到過(guò)這個(gè)問(wèn)題的同學(xué)（比如當(dāng)初的筆者），肯定想到過(guò) scrollHeight 這個(gè) DOM 屬性。想法很簡(jiǎn)單，當(dāng)用戶輸入的文本超過(guò)了文本框自身高度時(shí)不是會(huì)出現(xiàn)滾動(dòng)條嘛，那么自然而然就能想到 scrollHeight 這個(gè)屬性。scrollHeight 就應(yīng)該是用戶輸入文本的真實(shí)高度，至少超過(guò)文本框既定高度時(shí)是這樣。

那么問(wèn)題來(lái)了：如果沒(méi)超過(guò)呢？

OK 我知道你會(huì)先指定 rows="1" 讓文本框默認(rèn)高度只有一行。但是考慮這種情況：用戶先輸入了很多行文本

然后刪除了一段：

scrollHeight 值沒(méi)有變化。MDN 上說(shuō)了：

沒(méi)有垂直滾動(dòng)條的情況下，scrollHeight值與元素視圖填充所有內(nèi)容所需要的最小值clientHeight相同

scrollHeight 確實(shí)會(huì)隨著用戶輸入內(nèi)容多少而增減，但是僅限于出現(xiàn)滾動(dòng)條的情況，對(duì)于題設(shè)這個(gè)情況必然不適用，因?yàn)樾枨缶褪遣荒艹霈F(xiàn)滾動(dòng)條（嚴(yán)格來(lái)說(shuō)是超出可視區(qū)域）。你可以在獲取 scrollHeight 的值之前先把文本框高度設(shè)為 0 強(qiáng)制讓滾動(dòng)條出現(xiàn)，但是這樣可能使頁(yè)面發(fā)生閃爍，而且性能也低。

split(" ")

DOM 屬性靠不住，那我自己算文本高度不行嗎？說(shuō)我拿出所有文本，按換行符拆分，看有多少行，行數(shù) * 行高 不就是最終文本高度嗎？

額。。。當(dāng)文本沒(méi)有折行的情況下是這樣。。。

contenteditable

contenteditable 確實(shí)是一個(gè)（相對(duì)）可行的方案，但是作為一個(gè)踩過(guò)坑的先行者勸解你：不到萬(wàn)不得已，contenteditable 不要碰。這個(gè)玩意各個(gè)瀏覽器實(shí)現(xiàn)都不一樣，各種奇葩行為，光一個(gè)換行符就足夠折磨你半天。

當(dāng)然這里還沒(méi)有到那么復(fù)雜的地步，但是你得先會(huì)把“復(fù)制——粘貼”過(guò)去的樣式去掉才行

筆者的方法

說(shuō)了那么多廢話，那么究竟該怎么辦呢？這里筆者提供一種方法。

當(dāng)然首先聲明：筆者的方法未必是最簡(jiǎn)單的，如有其它更簡(jiǎn)單的方案歡迎留言提出。

我們想一下，textarea 不能按照內(nèi)容自適應(yīng)高度，div 可以啊，能不能先把文本填到一個(gè) div 里，div 的高度就應(yīng)該是文本框所需高度（當(dāng) padding、line-height 等樣式都一致的情況下），這時(shí)獲取 div 的高度賦值給文本框高度不就行了嗎。

就是這樣的思路。我們也不需要專門使用 JS 獲取，只要讓 div 把父元素?fù)纹饋?lái)，絕對(duì)定位 textarea 元素讓文本框占滿整個(gè)父元素大小就好了。

直接上代碼：

這里查看運(yùn)行結(jié)果：https://codepen.io/CarterLi/p...

三個(gè)要點(diǎn)：

字體相關(guān)樣式 #dummy 和 textarea 兩元素必須完全一致，差一點(diǎn)就可能出現(xiàn)兩者高度對(duì)不上的情況。

#dummy 中 white-space: pre-wrap 醒目。否則會(huì)出現(xiàn) HTML 中吞空格、換行符的情況。

就算有了 white-space: pre-wrap，HTML 仍然會(huì)吞掉最后的換行符。解決方案是在 #dummy 最后插入一個(gè)換行符元素?？梢允?
，也可以是一個(gè)偽元素。偽元素中換行符的寫法是 A（即換行符的 ASCII 碼 10 的十六進(jìn)制表示。不能寫 ）

代碼中是用 JS 給 #dummy 賦值。項(xiàng)目中如果你用 vuejs 或 angular 等 MVVM 框架，直接把文本框的值綁定到 div 上就好，非常方便。

如果你要限制文本框的最大最小高度，在 #dummy 上直接設(shè)置 min-height max-height 即可。

完

最后說(shuō)一句：把 textarea 蓋到一個(gè) div 上的做法還可以簡(jiǎn)單的實(shí)現(xiàn)文本框的語(yǔ)法高亮，讀者可以想想怎么做。

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

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

相關(guān)文章

  • 編寫自適應(yīng)高度的 textarea

    摘要：但是現(xiàn)在產(chǎn)品經(jīng)理說(shuō)了需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適應(yīng)其高度。想法很簡(jiǎn)單，當(dāng)用戶輸入的文本超過(guò)了文本框自身高度時(shí)不是會(huì)出現(xiàn)滾動(dòng)條嘛，那么自然而然就能想到這個(gè)屬性。就應(yīng)該是用戶輸入文本的真實(shí)高度，至少超過(guò)文本框既定高度時(shí)是這樣。 文本框是很常見(jiàn)的輸入控件，我相信只要寫過(guò)表單的肯定接觸過(guò) textarea 這個(gè)元素。 OK。但是現(xiàn)在產(chǎn)品經(jīng)理說(shuō)了：需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適...

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

  • 創(chuàng)建一個(gè)高度自適應(yīng)的textarea

    摘要：今天的任務(wù)是生成一個(gè)高度自適應(yīng)的而且也可以設(shè)置最小高度和最大高度。但是有一個(gè)問(wèn)題當(dāng)想從大變到小的時(shí)候，這個(gè)不能反映文字的實(shí)際高度，所以這個(gè)方法不是很適合。高度跟著文字的多少走的，而且不需要?jiǎng)赢?。用的方式生成一個(gè)無(wú)用的用來(lái)計(jì)算的高度。 今天的任務(wù)是生成一個(gè)高度自適應(yīng)的textarea,而且也可以設(shè)置最小高度和最大高度。最簡(jiǎn)單的方法textarea的屬性是overflow:auto;那么如...

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

  • 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng)

    摘要：使用該組件注意一個(gè)問(wèn)題就是不要在可視化區(qū)域的節(jié)點(diǎn)上使用樣式，否則會(huì)出現(xiàn)當(dāng)鼠標(biāo)焦點(diǎn)小時(shí)光標(biāo)和小水滴無(wú)法消失的情況地址項(xiàng)目地址參考鏈接模擬文本域輕松實(shí)現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng) 開(kāi)發(fā)過(guò)程中由于需要在發(fā)送消息的時(shí)候需要有一個(gè)可以高度自適應(yīng)的文本域，一開(kāi)始是使用textarea并搭配auto-size...

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

  • 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng)

    摘要：使用該組件注意一個(gè)問(wèn)題就是不要在可視化區(qū)域的節(jié)點(diǎn)上使用樣式，否則會(huì)出現(xiàn)當(dāng)鼠標(biāo)焦點(diǎn)小時(shí)光標(biāo)和小水滴無(wú)法消失的情況地址項(xiàng)目地址參考鏈接模擬文本域輕松實(shí)現(xiàn)高度自適應(yīng)如何讓元素只能輸入純文本 使用contenteditable+div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng) 開(kāi)發(fā)過(guò)程中由于需要在發(fā)送消息的時(shí)候需要有一個(gè)可以高度自適應(yīng)的文本域，一開(kāi)始是使用textarea并搭配auto-size...

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

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

0條評(píng)論

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