Question

所以我正在一个项目上，我想在屏幕中间有一个文本区域，但保留一个对齐的占位符。我需要将textarea设置为占位符的确切宽度，以使文本看起来实际上居中。

有没有一种方法可以根据数字字符设置文本区域的宽度，以便无论加载哪种字体，文本区域的宽度都会调整。现在，我只是使用vw来设置字体大小和textarea宽度，但是当在具有不同系统字体的不同计算机上加载网站时，这并不是一个完全可靠的解决方案。

这是该项目的当前工作版本：https://beta.fontspark.app

Answer 1

您可以获取占位符的长度，并使用div cols相应地设置with。当占位符不适合时，您可能需要减去一些cols。但这应该可以完成工作。

$( function() {
    var taPlaceholder = $('textarea[placeholder]');
    taPlaceholder.attr('cols', taPlaceholder.attr('placeholder').length);
});

textarea {
    font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="This is random placeholder"></textarea>

将textarea设置为内容的确切宽度

1 个答案: