移动端输入框高度自适应

Question

移动端的网页尺寸有限，所以一般输入框刚开始并不会占用太多的地方，然后随着用户的输入，自动适应完全显示文本的尺寸，下面介绍几种方法实现这种效果。

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 就会不断闪频。

占位符

<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;
}

这是一种方法，但是这个方法是有问题的，如果我们要给输入的东西加上背景，比如说给 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 各种情况就开始出现了。