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是完成了这个功用的。