移动端输入框高度自适应

Z时代
2024-01-10
分类：IT

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

移动端输入框高度自适应

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