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

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

textarea{
高度：113px；
}
textarea:：-webkit输入占位符{
颜色：#444；
字体大小：粗体；
文本对齐：居中；
线高：800%；
溢出：隐藏；
}

---

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

当用户调整大小时，

textarea

不会触发

resize

事件，因此我将感兴趣的代码放在

setInterval

中。css变量

--line height

每秒十次设置为文本区域的高度。我这样做是因为不可能在伪元素（

：：placeholder

等）上设置css

-除IE11外，所有主要浏览器都支持

var（）

jQuery（函数（$）{
设$textarea=$（'textarea'）；
setInterval（函数（）{
$textarea.get（0.style.setProperty）（“--line height”，$textarea.height（）+'px'）；
}, 100);
});
textarea{
高度：113px；
--线高：800%；
}
文本区域：：占位符{
颜色：#444；
字体大小：粗体；
文本对齐：居中；
线高：var（--线高）；
溢出：隐藏；
}
你的问题有点含糊。我假设您希望垂直对齐占位符，无论用户调整占位符的大小有多远

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

-除IE11外，所有主要浏览器都支持
var（）


jQuery（函数（$）{
设$textarea=$（'textarea'）；
setInterval（函数（）{
$textarea.get（0.style.setProperty）（“--line height”，$textarea.height（）+'px'）；
}, 100);
});
textarea{
高度：113px；
--线高：800%；
}
文本区域：：占位符{
颜色：#444；
字体大小：粗体；
文本对齐：居中；
线高：var（--线高）；
溢出：隐藏；
}
您可以使用JavaScript和span元素来实现。我用小提琴创建了一个简单的解决方案：


var txt=document.getElementById（“txt”）；
var span=document.getElementById（“span”）；
txt.onkeydown=函数（）{
如果（txt.value==“”）{
span.style.display=“块”；
}否则{
span.style.display=“无”；
}
}
设置间隔（（）=>{
span.style.top=String（parseInt（txt.style.height）/2）+“px”；
}，10）
textarea{
高度：113px；
}
跨度{
位置：绝对位置；
顶部：50px；
左：10px；
颜色：#444；
字体大小：粗体；
溢出：隐藏；
}

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


var txt=document.getElementById（“txt”）；
var span=document.getElementById（“span”）；
txt.onkeydown=函数（）{
如果（txt.value==“”）{
span.style.display=“块”；
}否则{
span.style.display=“无”；
}
}
设置间隔（（）=>{
span.style.top=String（parseInt（txt.style.height）/2）+“px”；
}，10）
textarea{
高度：113px；
}
跨度{
位置：绝对位置；
顶部：50px；
左：10px；
颜色：#444；
字体大小：粗体；
溢出：隐藏；
}

占位符
只需使用文本svg作为背景图像，并将其置于中心位置。由于没有真正正常工作的
：empty
伪选择器，您可以使用
：invalid
来模拟占位符行为，如本文所述：


textarea:无效{
背景图像：url（“数据：image/svg+xml；utf8，在此处写入文本”）；
背景位置：中心；
背景重复：无重复；
}
只需使用文本svg作为背景图像，并将其置于中心位置。由于没有真正正常工作的
：empty
伪选择器，您可以使用
：invalid
来模拟占位符行为，如本文所述：


textarea:无效{
背景图像：url（“数据：image/svg+xml；utf8，在此处写入文本”）；
背景位置：中心；
背景重复：无重复；
}
您是只希望占位符以这种方式垂直对齐，还是希望所有内容都输入文本区域？另外，您能提供一些您尝试过的代码吗？到目前为止，我已经在CSS中尝试过了，但是没有用，因为它只适用于1个高度。textarea:：-webkit输入占位符{color:#444；字体大小：粗体；文本对齐：居中；行高：800%；溢出：隐藏；}Oh，仅占位符。其他一切都很好。多个大小是指有限的大小数组，例如（200300500），还是无限数量的大小？它是无限数量的大小，因为文本区域的大小取决于它旁边的div的大小，可能是95px，105px，在选择的答案中，如果文本区域的高度改变，js代码每秒检查10次。如果textarea的高度取决于它旁边的div，为什么需要这样做？您是只希望占位符以这种方式垂直对齐，还是希望所有内容都输入textarea？另外，您能提供一些您尝试过的代码吗？到目前为止，我已经在CSS中尝试过了，但是没有用，因为它只适用于1个高度。textarea:：-webkit输入占位符{color:#444；字体大小：粗体；文本对齐：居中；线条高度：800%；ov