Html 如何使占位符文本收缩以适合其文本输入元素并显示其整个值？

我有以下HTML：

<form>
    <table border="1">
        <tr>
            <td>Traveler's name:</td>
            <td>
                <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/>
            </td>
        </tr>
        <tr>
            <td>Traveler's E-mail:</td>
            <td>
                <input type="email" id="traveleremail"/>
            </td>
        </tr>
    </table>
</form>

…但是，虽然这大大减小了字体的大小，但文本被截断了：

我尝试向CSS添加如下内容：

input[placeholder] {
    font-size: 0.6em;
    width: 500;
}

…但它不会在输入文本中扩展/加宽占位符的文本区域（输入文本足够宽，可以容纳缩减的文本，但仍会挤压到其自身的过小区域中）

如何做到这一点？

原始答复-2015年7月 像这样做怎么样？我使用jQuery来演示它。如果您希望在文本宽度方面更加“精确”，可以考虑一种获取文本宽度的方法，然后将jquery的CSS中的宽度设置为从获取文本宽度的函数返回的值（在这种情况下，您可能需要创建一个元素，将其html设置为占位符的内容，获取文本的宽度，然后删除该元素）。在任何情况下，下面的代码都是我要做的，以完成您的要求

我决定使用

setInterval

，因为对输入字段的更改不是黑白的。

每个

循环通过输入元素。然后代码检查输入是否为空，如果为空，则缩小字体大小（如我硬编码的那样为10px），否则将其设置为默认值（假设你想要14px，它得到14px）

setInterval（函数（）{
$（'input'）。每个（函数（）{
if（$（this.val（）=''）{
$（this.css）({
“宽度”：$（this）.width（）+“px”，
“高度”：$（this）.height（）+“px”
});
如果（parseFloat（$（this）.css（'font-size'））
占位符
不是元素，但您选择的是所有
占位符
元素。确定它与颜色有关，但选择器与您尝试的相同35; travelername占位符{font-size:.5em；}你将不得不缩小字体大小，或者可能做一些javascript魔术，因此为丢失的文本添加一个省略号，然后再次说明这只是掩盖了问题。好吧，这不可能做到。这是自dreamsicles以来最酷的事情。很好的解释。：）
input[placeholder] {
    font-size: 0.6em;
    width: 500;
}