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

Question

我正在尝试做的事情可能最好在图像中解释（我将在下面包含），但本质上它是一个文本inputHTML 字段，它是预先存在的值的一半，另一半是可替换的。我尝试同时添加 avalue和 aplaceholder字段，然后在 CSS 中将它们分开padding-left，但浏览器（Chrome）只是placeholder完全忽略了它们。

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

Answer 1

只需将其设为两个元素并将其样式化，就好像它们是一个元素一样。

将它们并排放置（或者更好地嵌套它们并制作外部 alabel以便它可以与 click 一起使用），并且input只为正确的元素制作 a 。

<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/