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

我想要做的事情也许最好用图像来解释（我将在下面添加），但本质上它是文本inputHTML 字段一半是预先存在的值，另一半是可替换的。我尝试添加两个value and a placeholder场，然后通过将它们分开padding-left在 CSS 中，但浏览器 (Chrome) 只是忽略placeholder共。

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

只需将其设为两个元素并将其设计为一个元素即可。

将它们并排放置（或者更好地嵌套它们并使外部成为label所以它可以通过点击来工作），并制作一个input只针对正确的元素。

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

and

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

Demo at http://jsfiddle.net/gaby/ahTJv/ http://jsfiddle.net/gaby/ahTJv/