Question

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

以下是我想要合并的两个案例。

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

Case2（“123 Example Street”将消失）：

目前它覆盖：

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

添加代码部分（我正在使用材质设计精简版库）：

<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

Vanilla 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

输入聚焦时会出现标签：

＆＃13;

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://api.yelp.com/v3/businesses/search?term=restaurant&latitude=40.82783908257346&longitude=-74.10162448883057",
  "method": "GET",
  "headers": {
    "authorization": "Bearer xxxxxxxxxxxxx_xxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxx_xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "cache-control": "no-cache",
    // "postman-token": "1c66878e-c740-e10d-8d9a-71d731547d2e"
  }
}


$.ajax(settings).done(function (response) {
  console.log(response);

＆＃13;

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;
}

＆＃13;

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

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

3 个答案: