Question

我正在努力使占位符在文本区域中垂直居中。到目前为止，我发现的唯一可行的方法是line-height语句，但这不允许我将其集中放置在多种大小的textarea中。

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

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

当用户调整大小时，resize不会触发textarea事件，因此我将有趣的代码放入了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>

Answer 2

只需将文本svg用作背景图像并将其放置在中心即可。由于没有一个运行良好的:empty伪选择器，因此可以使用:invalid来模拟占位符行为，如本文中所述：Can I select empty textareas with CSS?

textarea:invalid {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='74' height='13' viewBox='0 0 74 13'><text transform='matrix(1 0 0 1 0 10)' font-size='12'>Write text here</text></svg>");
  background-position: center;
  background-repeat: no-repeat;
}

<textarea required></textarea>

Answer 3

您可以使用JavaScript和span元素来实现。我在小提琴中创建了一个简单的解决方案：

var txt = document.getElementById("txt");
var span = document.getElementById("span");

txt.onkeydown = function() {

  if (txt.value == "") {
    span.style.display = "block";
  } else {
    span.style.display = "none";
  }
}

setInterval(()=>{
	span.style.top = String(parseInt(txt.style.height)/2) + "px";
}, 10)

textarea {
  height: 113px;
}

span {
  position: absolute;
  top: 50px;
  left: 10px;
  color: #444;
  font-weight: bold;
  overflow: hidden;
}

<textarea id="txt" onresize="console.log('test')"></textarea>
<span id="span">Placeholder</span>

我认为没有其他选择

编辑1：

对不起，我看不到理查德·帕纳比·金的答案。但是，现在您有2个示例；）1个香草和1个使用JQuery

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

3 个答案: