javascript - 在动态大小的文本区域中垂直居中占位符

Question

我正在努力将文本区域中的占位符垂直居中。到目前为止，我发现唯一可用的方法是行高语句，但这不允许我将它集中放置在多种尺寸的文本区域中。

textarea {
  height: 113px;
}
textarea::-webkit-input-placeholder {
  color: #444;
  font-weight: bold;
  text-align: center;
  line-height: 800%;
  overflow: hidden;
}

<textarea placeholder="Some sample text."></textarea>

Answer 1

你的问题有点含糊。我假设无论用户将其调整到多远，您都希望垂直对齐占位符。

当用户调整它的大小时，textarea 不会触发 resize 事件，所以我将有趣的代码放在 setInterval 中。每秒十次，css 变量 --line-height 被设置为文本区域的高度。我这样做是因为不可能在伪元素(::placeholder 等)上设置 css。

Browser Support - 除了IE11，所有主流浏览器都支持var()。

jQuery(function($) {
  let $textarea = $('textarea');
  setInterval(function() {
    $textarea.get(0).style.setProperty("--line-height", $textarea.height() + 'px');
  }, 100);
});

textarea {
  height: 113px;
  --line-height: 800%;
}

textarea::placeholder {
  color: #444;
  font-weight: bold;
  text-align: center;
  line-height: var(--line-height);
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea placeholder="Some sample text."></textarea>