是否可以同时使用占位符和浮动输入文本？

Question

我正在尝试使用占位符文本和浮动文本输入（当用户单击输入字段时会向上移动）。

以下是我想合并的两种情况。

案例1（“街道地址”将向上移动）：

案例2（“123 Example Street”将消失）：

目前它覆盖：

这篇文章说这是材料设计的缺点之一 http://bradfrost.com/blog/post/float-label-pattern/

添加代码部分（我使用的是 Material Design lite 库）：

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label streetupdate" >
        <input class="mdl-textfield__input" type="text" id="input_name" />

        <label class="mdl-textfield__label" for="input_name">Street Address</label>
</div> 

Answer 1

原版 JS：

input = document.getElementById("input_name");
inputP = input.getAttribute("placeholder");

input.placeholder = "";
input.onfocus = function () {
	this.placeholder = inputP;
}

input.onblur = function () {
	this.placeholder = "";
}

input:focus ~ .floating-label {
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label streetupdate" >
        <input class="mdl-textfield__input inputText" placeholder="123 Address" type="text" id="input_name"/>

        <label class="floating-label mdl-textfield__label" for="input_name">Street Address</label>
</div> 

还有 Prue CSS：

input:focus ~ .floating-label,
input:valid ~ .floating-label {
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}


.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

/* Cluttered Magic */

input:focus::-webkit-input-placeholder,
input:valid::-webkit-input-placeholder{
  opacity: 1;
}

input:focus::-moz-placeholder,
input:valid::-moz-placeholder{
  opacity: 1;
}

input:focus:-ms-input-placeholder,
input:valid:-ms-input-placeholder{
  opacity: 1;
}

input:focus:-moz-placeholder,
input:valid:-moz-placeholder {
  opacity: 1;
}

input::-webkit-input-placeholder,
input::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

input::-moz-placeholder,
input::-moz-placeholder {
  opacity: 0;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

input:-ms-input-placeholder,
input:-ms-input-placeholder {
  opacity: 0;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

input:-moz-placeholder,
input:-moz-placeholder {
  opacity: 0;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label streetupdate" >
        <input class="mdl-textfield__input inputText" placeholder="123 Address" type="text" id="input_name" required/>

        <label class="floating-label mdl-textfield__label" for="input_name">Street Address</label>
</div> 

here 的浮动标签功能

Answer 2

输入焦点时出现标签：

input,
label {
  float: left;
  clear: both;
}
input {
  margin-top: 20px;
}
label {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(50%);
  transition: opacity .2s ease, transform .4s ease;
}
#container {
  position: relative;
}
input:focus + label {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s .1s ease, transform .4s ease;
}

<div id="container">
  <input placeholder="123 New York" type="text" id="input_name" />
  <label for="input_name">Street Address</label>
</div>

Answer 3

HTML：

<!-- Without Placeholder -->
<div class="text-input">
  <input type='text' />
  <label>One</label>
</div>

<!-- With Placeholder -->
<div class="text-input">
  <input type='text' placeholder="Hello" />
  <label>Two</label>
</div>

CSS：

.text-input {
  position: relative;
  padding-top: 20px;
  margin-top: 5px;
}
.text-input input {
  height: 35px;
  width: 200px;
  border: 0;
  font-size: inherit;
  font-family: inherit;
  background: none;
  border-bottom: 2px solid #c2c2c2;
  outline: none;
  transition: .2s ease-out all;
}
.text-input input::placeholder {
  color: transparent;
  transition: .2s ease-out all;
}
.text-input label {
  position: absolute;
  left: 5px;
  top: 31px;
  color: #c2c2c2;
  transition: .2s ease-out all;
}
.text-input input:focus {
  border-bottom: 2px solid #89ac23;
}
.text-input input:focus + label {
  top: 0;
  left: 0;
  font-size: .8em;
  color: inherit;
}
.text-input input:focus::placeholder {
  color: #c2c2c2;
  transition-delay: .1s;
}

JSFiddle Example