如何创建拆分文本输入占位符？

Question

我想要做的最好也许可以在图片中解释（我将在下面包含），但基本上它是一个文本input HTML字段，它是预先存在的值的一半，另一个是一半是可更换的。我尝试添加value和placeholder字段，然后通过CSS中的padding-left分隔它们，但是浏览器（Chrome）只是忽略了placeholder。

请注意字符串“turingpages.com/”和“username”之间的分隔。我想保持“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/