如何使用静态占位符自动缩放输入？ [英] How to automatically scale input with static placeholder?

问题描述

我已经使用这个hack在输入中创建了一个静态占位符：

 < div class =l_standard staticPlaceholder> 
< label for =aliasstyle =cursor：text;> site.com/< / label> 
< input type =textname =aliasid =aliasmaxlength =15/> 
< / div> 
  

但我需要手动设置宽度 input 以防止在调整大小时破坏此构造。我怎样才能让这个 input 像rubber？

下面是一个例子 - http://jsfiddle.net/qKfqa/ 输入字段下降并停止制动。



演示： http://jsfiddle.net/qKfqa/7/ （I'已经使框边框可见，以演示布局;调整窗格的大小以查看橡皮行为）。

这依赖于一些破解，即将一个单元格设置为1px宽并依靠 display：table-cell 的行为将其强制为所需的宽度。

我已经添加额外的标记以充当细胞;

  .staticPlaceholder {
 border：1px solid #ccc; 
 display：inline-block; 
 white-space：nowrap; 
 padding：2px; 
宽度：50％; 
 display：table; 
} 
 .staticPlaceholder> DIV {
 display：table-cell; 
} 
 .staticPlaceholder> DIV：第一个孩子{
 width：1px; 
} 
  

_{测试IE8 +，Chrome，FF} p>

---

内嵌块

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

不占用占位符文本的宽度，即它可以是任何你想要的。输入的宽度也不重要。

  .staticPlaceholder {
 border：1px solid #ccc; 
 
 / *重要部分* / 
 display：inline-block; 
 white-space：nowrap; 
} 
 
 .staticPlaceholder输入{
 border：0; 
 outline：0; 
 
 / *宽度可以是任何你想要的* / 
 width：200px; 
 
 $ / code> 

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

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

I've been used this hack to create a static placeholder in the 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>

But I need manually set a width for input to prevent breaking of this construction when resizing. How can I make this input like "rubber"?

Here is an example - http://jsfiddle.net/qKfqa/ Input field goes down and brake construction.

Thanks.

解决方案

Table Cell

Demo: http://jsfiddle.net/qKfqa/7/ (I've made box borders visible to demonstrate layout; resize pane to see "rubber" behavior).

This relies on a bit of a hack, i.e. setting one cell to 1px wide and relying on the behavior of display:table-cell to force it to the width needed.

I've added additional markup to serve as the "cells"; it may be possible to do this with fewer elements.

.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;
}

_{Tested with IE8+, Chrome, FF}

---

Inline Block

Demo: http://jsfiddle.net/qKfqa/5/

There is no dependency on the width of the placeholder text, i.e. it can be whatever you want. Nor does the width of the input matter.

.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;
}

If it works correctly, it should look like:

_{Tested with IE8+, Chrome, FF}

这篇关于如何使用静态占位符自动缩放输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！