如何在该文本区域中垂直居中光标

Question

我读了很多文章，尝试了很多方法，包括添加行高属性，但我似乎无法使文本区域中的光标垂直居中。

重要的是，这一立场保持绝对。以下是文本区域的CSS：

.tile-text-input {
height: 23%;
width: 70%;
position: absolute;
left: 50%;
bottom: 30%;
transform: translate(-50%);
padding: 15px;
border-radius: 10px;
text-align: center;
vertical-align: middle;
}

Answer 1

var textInput = document.getElementById('textInput');
var textDuplicate = document.getElementById('textDuplicate');
textInput.addEventListener('keyup', function(e) {
textDuplicate.innerHTML = textInput.value;
});

#img-wrapper {
width: 400px;
height: 350px;
background-image: url('https://images.unsplash.com/photo-1553095066-5014bc7b7f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2FsbCUyMGJhY2tncm91bmR8ZW58MHx8MHx8&w=1000&q=80');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
#textDuplicate { 
color: #fff; 
text-align: center;
padding: 10px;
}

<textarea id="textInput"></textarea>
<div id="img-wrapper">
<span id="textDuplicate"></span>
</div>

我能问一下你为什么要这么做吗？没有现成的方法可以通过设置属性来实现这一点。因此，您可能需要使用javascript以某种方式测量文本区域或内容的高度，或者使用内容可编辑的div并复制用户在隐藏文本区域内键入的内容，这是一个巨大的可访问性问题。老实说，我会避免这种情况。