如何创建分割文本输入占位符？ [英] How can I make a split-text input placeholder?

问题描述

我想要做的事可能最好在一个图像（我将在下面包括）中解释，但基本上是一个文本 input HTML字段半个预先存在的值，另一半是可替换的。我尝试添加值和占位符字段，然后通过 padding-left 在CSS中，而是浏览器（Chrome）只是忽略占位符。

请注意字符串turingpages.com/和用户名。我想保留turingpages.com/不可编辑，并且用户名充当HTML5占位符。

解决方案

只要把它做成两个元素，就像它们一样。 / p>

将它们并排放置（或更好地嵌套它们，并使外部的标签

  
 < label class =group> turingpages.com/< input type =textplaceholder =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/

What I'm trying to do could perhaps best be explained in an image (which I'll include below), but essentially it's a text input HTML field which is half a pre-existing value and the other half is replaceable. I tried adding both a value and a placeholder field and then separating them via padding-left in CSS, but instead the browser (Chrome) just ignores the placeholder altogether.

Note the separation between the string "turingpages.com/" and "username". I want to keep "turingpages.com/" un-editable and have "username" act as an HTML5 placeholder. How could I go about achieving this effect?

解决方案

Just make it two elements and style it as if they were one..

Put them side by side (or even better nest them and make the outer a label so it will work with clicking), and make an input only for the right element.

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

这篇关于如何创建分割文本输入占位符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！