成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

簡單實(shí)現(xiàn)一個(gè)textarea自適應(yīng)高度

lanffy / 2602人閱讀

摘要：自適應(yīng)的實(shí)現(xiàn)方法很多，原理其實(shí)比較簡單監(jiān)聽的或者鍵盤事件，獲取元素的重置元素的高度?？创a原理很簡單，獲取到元素的即元素真實(shí)高度與元素的行高求商，四舍五入。如果設(shè)置的話，需要減去上下的值，代碼中也有體現(xiàn)。有問題歡迎交流，最后附上源碼。

textarea自適應(yīng)的實(shí)現(xiàn)方法很多，原理其實(shí)比較簡單：監(jiān)聽textarea的input或者鍵盤事件，獲取元素的scrollHeight,重置textarea元素的高度。

預(yù)覽地址：textarea

我們知道textarea有個(gè)rows的屬性，改變r(jià)ows的值可以改變textarea的高度，至于怎么改變不做探究, 所以思路就來了：當(dāng)文本輸入的時(shí)候，動(dòng)態(tài)給textarea賦值rows, rows自會(huì)導(dǎo)致textarea的高度改變

接下來，問題就來了，如何動(dòng)態(tài)獲取rows的值？首先我們先看一下textarea與rows, cols以及瀏覽器的的關(guān)系是怎樣的？可以參考張大神的文章HTML textarea cols,rows屬性和寬度高度關(guān)系研究

猜測你已經(jīng)看完了，大概得出一個(gè)結(jié)論就是：textarea高度 ≈ lineHeight * rows. 這樣思路就更清晰了。看代碼

resizeHeight(elem, style) {
  elem.removeAttribute("rows")
  elem.style.height = "auto"
  const { scrollHeight } = elem
  const { lineHeight, paddingTop, paddingBottom } = style
  let rowsNum = Math.round((scrollHeight - paddingTop - paddingBottom) / lineHeight)
  elem.setAttribute("rows", rowsNum)
},

原理很簡單，獲取到元素的scrollHeight(即元素真實(shí)高度), 與元素的行高求商，四舍五入。有同學(xué)說，直接把scrollHeight賦值給元素不就行了，這么麻煩，說的好有道理。是不是這樣

const { scrollHeight } = elem
elem.style.height = `${scrollHeight}px`

貌似好像也行呀，pc站好像沒問題，不過筆者在移動(dòng)端測試的時(shí)候刪除的時(shí)候，貌似有點(diǎn)小問題。換成改成獲取rows的方法就好了。

如果textarea設(shè)置padding的話，需要減去上下padding的值，代碼中也有體現(xiàn)。

有問題歡迎交流，最后附上源碼。

查看源碼：源碼

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97272.html

相關(guān)文章

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

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

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

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

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

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

  • 使用contenteditable+div模擬textarea文本域實(shí)現(xiàn)高度自適應(yīng)

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

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

  • 使用contenteditable+div模擬textarea文本域實(shí)現(xiàn)高度自適應(yīng)

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<