如何使用静态占位符自动缩放输入？

Question

我已经习惯了这个hack在input：

中创建一个静态占位符

<div class="l_standard staticPlaceholder">
    <label for="alias" style="cursor: text;">site.com/</label>
    <input type="text" name="alias" id="alias" maxlength="15" />
</div>

但我需要为width手动设置input，以防止在调整大小时破坏此构造。我怎样才能使input像“橡皮”一样？

以下是一个示例 - http://jsfiddle.net/qKfqa/输入字段下降并制动构造。

感谢。

Answer 1

表格单元格

演示： http://jsfiddle.net/qKfqa/7/（我已经看到了框边框以展示布局;调整窗格大小以查看“橡胶”行为）。

这取决于一点点黑客，即将一个单元格设置为1px宽并依赖display:table-cell的行为来强制它达到所需的宽度。

我添加了额外的标记作为“单元格”;可以用更少的元素来做到这一点。

.staticPlaceholder {
    border: 1px solid #ccc;
    display: inline-block;
    white-space: nowrap;
    padding: 2px;
    width: 50%;
    display: table;
}
.staticPlaceholder > DIV {
    display: table-cell;
}
.staticPlaceholder > DIV:first-child {
    width: 1px;
}

_{使用IE8 +，Chrome，FF进行测试}

---

内联块

演示： http://jsfiddle.net/qKfqa/5/

不依赖于占位符文本的宽度，即它可以是您想要的任何内容。输入的宽度也不重要。

.staticPlaceholder {
    border: 1px solid #ccc;

    /* important part */
    display: inline-block;
    white-space: nowrap;
}

.staticPlaceholder input {
    border: 0;
    outline: 0;

    /* width can be anything you want */
    width: 200px;
}

如果它正常工作，它应该如下：

_{使用IE8 +，Chrome，FF进行测试}

Answer 2

让.staticPlaceHolder更宽。我将其更改为width: 300px;：http://jsfiddle.net/qKfqa/1/

Answer 3

输入上的

width: 100%;将使其适合父div的宽度，但border / padding / margin可能会将其搞砸一些，因此您可能还想添加box-sizing: border-box。

http://jsfiddle.net/qKfqa/2/