移動端：對高度自適應的輸入框說不~

一、textarea:

核心想法: $(this).height(this.scrollHeight)

$textarea.addEventListener('input', function () {
    var currentLength = this.value.length;
    if (currentLength < lastLength) {
      this.style.height = 'auto';
    }
    var currentLength = this.scrollHeight;

    if (lastHeight !== currentHeight || !this.style.height) {
      this.style.height = currentHeight + 2 + 'px';
    }

    lastLength = currentLength;
    lastHeight = currentHeight;
  })

這個方法在ios上會變得很是奇怪，由於咱們使用input進行監聽輸入的時候，事實上他會把還沒輸入到屏幕上的文字還在輸入法上的文字也計算在裏邊，因此使用input進行監聽是很是不穩當的，事實上有一個方法可以監聽中文的輸入，但僅僅是中文的輸入，compositionend可以監聽中文的輸入，沒選中文的輸入不會進行監聽。ios出現問題就是每次設置auto，一旦咱們輸入的內容超過鍵盤，ios就會不斷閃頻。目前沒找到解決的方法，我看做文紙條這個app上是實現了這個功能，可是他是使用的原生來實現的。這個方法捨棄。

二、佔位符

<div class="container">
    <span id="text" class="text font-style"></span>
    <textarea id="textarea" class="textarea font-style"></textarea>
  </div>

.container {
    position: relative;
    min-height: 90px;
}

.text {
    font-size: 0;
    color: transparent;
  white-space: pre-wrap;
}

.textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    resize: none;
    border: 0;
    outline: none;
}

/* 統一內容樣式 */
.font-style {
    font-family: Helvetica;
    word-wrap: break-word;
    word-break: break-all;
    line-height: 48px;
    font-size: 32px;
}

摘自[[貝聊科技]不簡單的自適應高度輸入框](https://juejin.im/post/5b7653...，因此那段時間瘋狂在網上找解決方法。這是一種方法，可是這個方法是有問題的，若是咱們要給輸入的東西加上背景，好比說給textarea加上一個背景，而後問題就出現了，由於span是行內元素，背景可以到達的位置是span輸入的內容範圍，若是是內容少還好，內容多就炸了，一行中有一部分是沒有背景顏色的。

三、偏移的方法

<div class="placeholder"></div>
  <textarea id="textarea"></textarea>

.placeholder {
    width: 100px;
    line-height: 20px;
    font-size: 20px;
    transform: translateX(-1000px);
  }
  #textarea {
    width: 100px;
    line-height: 20px;
    font-size: 20px;
  }

$textarea.on('input', function () {
    var text = this.value;
    $placeholder.innerText = text;
    var height = $placeholder.style.height;
    this.height = height + 'px';
  })

這種方法就是把textarea和div的樣式設置成徹底同樣，必須徹底同樣，而後把div的偏移量設置特別大，可是不可以設置div爲display: none，這樣咱們就獲取不到他的高度了，隨便你怎麼設置，只要隱藏這個東西就行了。

四、contenteditable

還有一種方法是把div變爲可編輯的狀態，可是這種方法一來就被我放棄了，由於要兼容多種機型，可能有的機型不兼容，並且要輸入的字數，那就炸了，他使用的不多見的DOMNodeInserted，這不炸了嘛。

這幾種方法在安卓上都還能夠，可是在ios都炸了，我想貝聊的這位兄弟應該是沒嘗試輸入不少文字，一旦輸入不少文字，內容超過鍵盤，第一種方法就出現閃頻，第二種方法直接文字都不見了，第三種方法pc端還能接受，可是移動端有些卡頓，文字一多，就直接炸了。反正一旦文字輸多了，ios各類狀況就開始出現了。因此我總結的經驗的就是對高度自適應的輸入框說不，這個需求作不了，無法作。客戶端應該是能夠作的，由於我看到做文紙條這個app是實現了這個功能的。