如何制作拆分文本输入占位符？

Question

我想要做的最好用一张图片来解释（我将在下面包含），但本质上它是一个文本 input HTML 字段，其中一半是预先存在的值，另一半是可更换。我尝试同时添加 value 和 placeholder 字段，然后通过 CSS 中的 padding-left 将它们分开，但浏览器 (Chrome) 完全忽略了 placeholder。

注意字符串“turingpages.com/”和“用户名”之间的分隔。我想保持“turingpages.com/”不可编辑，并让“用户名”充当 HTML5 占位符。我怎样才能达到这种效果？

Answer 1

只需将其设置为两个元素，并将其设置为一个元素..

将它们并排放置（或者更好地嵌套它们并将外部设置为 label，以便单击时起作用），并为正确的元素创建 input。

<label class="group">turingpages.com/<input type="text" placeholder="username"/></label>

和

label.group{
    line-height:40px;
    background-color:white;
    display:inline-block;
    padding:0 10px;
    font-size:14px;
}
label.group input{
    border:0;
    background-color:transparent;
    padding:0;
    display:inline;
    color:#aaa;
}

演示地址 http://jsfiddle.net/gaby/ahTJv/