Question

我想拥有输入和选择框的持久占位符。例如，

<input type="text" placeholder="First Name:" />

输入文本框将使用占位符'First Name：'进行渲染。假设当输入被聚焦并且输入的值是'Ram'时，占位符应该显示为'名字：Ram'。如果我们删除了Ram，那么只有'名字：'应该在那里。选择框应该存在类似的行为在选择选项时，值应显示为“名字：任意”（任何值是选中的值）。使用Jquery也没关系。

Answer 1

对于辅助功能，请使用<label>元素，如下所示：

<label for='firstName'>First Name:</label>
<input type='text' id='firstName' placeholder='First name'>

同样，在<select>元素：

<label for='foo'>Foo:</label>
<select id='foo'>
    <option value='1'>Bar</option>
    <option value='2'>Baz</option>
</select>

您可以设置标签元素的样式，以便使用CSS显示。

Answer 2

您可以执行类似

的操作

<强> HTML

<div class="container">
  <input type="text" value="" class="free-typing"></input>
  <input autocomplete="off" value="First Name:" class="persistent-placeholder"/>
</div>

<强> CSS

.container {
   display: block;
   max-width: 600px;
   position: relative;
   height: 36px;
   box-sizing: border-box;
   border: 1px solid gray;
   border-radius: 3px;
   background-color: white;
}

.persistent-placeholder {
   height: auto;
   width: 100%;
   color: silver;
   z-index: 0;
   position: absolute;
   top: 0; bottom: 0;
   left: 0; right: 0;
   background-color: transparent;
   border: none;
   text-indent: 5px;
   line-height: 36px;
}

.free-typing {
  z-index: 1;
   width: 100%;
   background-color: transparent;
   position: absolute;
   top: 0;  bottom: 0;
   left: 0;  right: 0;
   box-sizing: border-box;
   border: none;
   text-indent: 5px;
   line-height: 36px;
   font-size: 18px;
   padding-left: 100px; // this will give you indentation for the placeholder to show
}

有关更多信息，我写了一篇关于如何实现类似效果的文章。 https://medium.com/@Cuadraman/how-to-recreate-google-s-input-persistent-placeholder-8d507858e815#.1vs0vyigx

输入和选择框的持久占位符

2 个答案: