摘要：通常情況下，為了給用戶一個(gè)良好的體驗(yàn)，需要讓這個(gè)多行文本輸入框的高度自適應(yīng)，從而避免滾動(dòng)條帶來(lái)的問(wèn)題。到此，才算實(shí)現(xiàn)一個(gè)高度自適應(yīng)的多行文本輸入框。

??通過(guò)創(chuàng)建 textarea 標(biāo)簽，并且指定其 rows 和 cols 屬性，就可以創(chuàng)建一個(gè)多行文本輸入框。

??但是當(dāng)輸入的內(nèi)容超過(guò)指定的 rows 之后，就會(huì)出現(xiàn)滾動(dòng)條，如果用戶想要查看全部?jī)?nèi)容，那就必須來(lái)回的拖動(dòng)滾動(dòng)條。而且這個(gè)滾動(dòng)條只有在用戶滾動(dòng)的時(shí)候才會(huì)出現(xiàn)，在一些情況下，用戶可能并不知道該區(qū)域有更多的內(nèi)容。

??通常情況下，為了給用戶一個(gè)良好的體驗(yàn)，需要讓這個(gè)多行文本輸入框的高度自適應(yīng)，從而避免滾動(dòng)條帶來(lái)的問(wèn)題。

??實(shí)現(xiàn)高度自適應(yīng)的文本輸入框的思路很簡(jiǎn)單：監(jiān)聽(tīng)輸入相關(guān)的事件，獲取到元素的內(nèi)容高度，修改 textarea 的固定高度。

??其中涉及很多基礎(chǔ)的知識(shí)，也就是我們常說(shuō)的細(xì)節(jié)問(wèn)題處理：

1、scrollHeight

??scrollHeight 這個(gè)只讀屬性是一個(gè)元素內(nèi)容高度的度量，包括由于溢出的視圖中不可見(jiàn)的內(nèi)容。

??scrollHeight 包含元素的 padding，但是不包含元素的 border 和 margin 。當(dāng)元素中不存在溢出內(nèi)容，則 scrollHeight 與 clientHeight 是相同的。

??接下來(lái)只要將獲取到的 scrollHeight 屬性值賦給元素樣式中的 height 屬性，是不是就可以動(dòng)態(tài)的更改高度呢？當(dāng)然，事情并沒(méi)有那么簡(jiǎn)單，這里又要引出另一個(gè)基礎(chǔ)知識(shí)點(diǎn)。

2、box-sizing

??CSS 中的盒模型基本上是?？嫉囊粋€(gè)知識(shí)點(diǎn)，CSS 中可以通過(guò)設(shè)置 box-sizing 屬性值，從而更改盒模型高度和寬度的計(jì)算，下面以高度為例：

content-box：是默認(rèn)值。如果你設(shè)置一個(gè)元素的高度為100px，意味著元素內(nèi)容區(qū)域的高度為100px，如果再設(shè)置 padding 和 border ，那么最終元素的高度為 100px + border-top + border-bottom + padding-top + padding-bottom 。

border-box：如果你設(shè)置一個(gè)元素的高度為100px，則意味著元素的最終高度就是100px，而元素內(nèi)容區(qū)域的高度為 100px - border-top - border-bottom - padding-top - padding-bottom 。

??由此可見(jiàn)，為元素設(shè)置樣式中的 height 屬性時(shí)，需要弄清楚元素的 box-sizing 、 padding 以及 border。

3、getComputedStyle

??對(duì)于前端新手來(lái)說(shuō)，要獲取到元素樣式的 box-sizing 屬性值，可能第一時(shí)間會(huì)想到：

  document.getElementById("demo").style.boxSizing

??但是大部分情況下，該屬性獲取的是空值，因?yàn)樗荒軌颢@取行內(nèi)樣式，如果 style 屬性中并沒(méi)有設(shè)置 boxSizing 屬性值，那自然就是空值。

??在 CSS 中，開(kāi)發(fā)者可以通過(guò)很多方式去設(shè)置元素的樣式，并且它們的優(yōu)先級(jí)各不相同，那么就需要一個(gè) API 來(lái)確定元素最終的樣式，而 Window.getComputedStyle() 方法正是因此而生。

??Window.getComputedStyle() 方法返回一個(gè)實(shí)時(shí)的 CSSStyleDeclaration 對(duì)象，通過(guò)調(diào)用其 getPropertyValue() 方法，獲取相應(yīng)的屬性值：

  const style = window.getComputedStyle(el)
  style.getPropertyValue("box-sizing")

4、實(shí)現(xiàn)

??有了上述三個(gè)知識(shí)點(diǎn)的補(bǔ)充，接下來(lái)就是代碼實(shí)現(xiàn)：

function AutoSize (el) {
  if (!(this instanceof AutoSize)) {
    return new AutoSize(el)
  }
  if (!el) {
    throw new Error("element can not be empty")
  }
  if (typeof el === "string") {
    el = document.querySelector(el)
  }
  this.el = el
  const attrs = ["box-sizing", "padding-top", "padding-bottom", "border-top", "border-bottom"]

  // 初始化信息
  this.heightOffset = 0
  const style = window.getComputedStyle(el)
  const [boxSizing, paddingTop, paddingBottom, borderTop, borderBottom] = attrs.map(item => style.getPropertyValue(item))
  if (boxSizing === "content-box") {
    this.heightOffset = -(parseFloat(paddingTop)) - parseFloat(paddingBottom)
  } else {
    this.heightOffset = parseFloat(borderTop)  + parseFloat(borderBottom)
  }
  this.initEvent()
}

AutoSize.prototype = {
  initEvent () {
    this.listener = this.handleAction.bind(this)
    this.el.addEventListener("input", this.listener, false)
  },
  destroy () {
    this.el.removeEventListener("input", this.listener, false)
    this.listener = null
  },
  handleAction (e) {
    const event = e || window.event
    const target = event.target || event.srcElement
    target.style.height = ""
    target.style.height = target.scrollHeight + this.heightOffset + "px"
  }
}

??對(duì)于 input 這樣高頻度觸發(fā)的事件，一般需要采用函數(shù)節(jié)流或者函數(shù)防抖的方式進(jìn)行優(yōu)化，這里就留給讀者折騰吧。

??HTML 中還有一個(gè)很特別的屬性 -- contenteditable，該屬性可以規(guī)定當(dāng)前元素是否可編輯（下文統(tǒng)稱這樣的元素為可編輯元素），該屬性的取值有以下幾種：

true 或者空字符串，表示元素是可以編輯的；

false 表示元素是不可編輯的；

plaintext-only 只處理文本內(nèi)容；

更多取值，請(qǐng)查看W3C ContentEditable。

??當(dāng)用戶向可編輯元素中輸入內(nèi)容時(shí)，瀏覽器會(huì)生成對(duì)應(yīng)的 DOM 元素，所以可編輯元素可以做富文本編輯功能，例如：medium-editor。

??但是由于各個(gè)瀏覽器對(duì)于標(biāo)簽的生成規(guī)則不同，兼容性方面的處理是很大的難題。

??現(xiàn)在回到實(shí)現(xiàn)高度自適應(yīng)的多行文本輸入框的需求上來(lái)，考慮到用戶可能輸入或者粘貼富文本內(nèi)容，這里需要將 contenteditable 屬性設(shè)置為 plaintext-only ：

??現(xiàn)在這個(gè) div 標(biāo)簽變成了一個(gè)高度自適應(yīng)的文本輸入框，是不是很神奇！不過(guò)不要高興的太早，還有需要考慮一些事情：

1、placeholder

??對(duì)于一個(gè)正兒八經(jīng)的輸入框，是不是應(yīng)該有一個(gè) placeholder 效果啊：

  [contenteditable=true]:empty::before {
    content: attr(data-placeholder);
    color: red;
    display: block;
  }

2、value

??對(duì)于 textarea 標(biāo)簽，可以通過(guò) value 屬性值獲取用戶輸入的內(nèi)容。但是對(duì)于設(shè)置 contenteditable 屬性的元素來(lái)說(shuō)，就需要具體情況具體分析了：

如果需要獲取 HTML 結(jié)構(gòu)，那么就需要采用 innerHTML 屬性；

如果僅僅獲取文本內(nèi)容，那么可以考慮 innerText 和 textContent。

??innerText 和 textContent 是不是又讓你傻傻分不清了，關(guān)于它們的區(qū)別主要有：

textContent 會(huì)獲取所有元素的內(nèi)容，包括 script 和 style 標(biāo)簽元素，而 innerText 不會(huì)；

innerText 受 CSS 樣式的影響，不會(huì)返回隱藏元素的文本，而 textContent 會(huì)；

innerText 返回的文本內(nèi)容會(huì)格式化。

??由于上述 contenteditable 屬性指定了 plaintext-only 屬性值，所以這三種屬性獲取到的值是一樣的。

3、禁止富文本輸入的其它方式

??除了指定 plaintext-only 屬性值的方法，張?chǎng)涡翊笊?/strong>在很多年前寫過(guò)一個(gè)div 模擬 textarea 實(shí)現(xiàn)高度自適應(yīng)，其中是通過(guò) CSS 屬性實(shí)現(xiàn)只允許輸入文本內(nèi)容：

  -webkit-user-modify: read-write-plaintext-only;