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

雲中歌發表於2019-02-16

1、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上是實現了這個功能，但是他是使用的原生來實現的。這個方法捨棄。

2、佔位符

  <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輸入的內容範圍，如果是內容少還好，內容多就炸了，一行中有一部分是沒有背景顏色的。

3、偏移的方法

  <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，這樣我們就獲取不到他的高度了，隨便你怎麼設定，只要隱藏這個東西就好了。

4、contenteditable

還有一種方法是把div變為可編輯的狀態，但是這種方法一來就被我放棄了，因為要相容多種機型，可能有的機型不相容，而且要輸入的字數，那就炸了，他使用的很少見的DOMNodeInserted，這不炸了嘛。

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

相關文章