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

Question

我想为输入框和选择框保留持久的占位符。例如，

<input type="text" placeholder="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