Я пытаюсь использовать заполнитель текста и плавающий текст (который перемещается вверх, когда пользователь нажимает на поле ввода).

Ниже приведены два случая, которые я хотел бы объединить.

Case1 («Адрес улицы» будет двигаться вверх):

enter image description here

Case2 («123 Пример улицы» исчезнет):

enter image description here

В настоящее время переопределяет:

enter image description here

В этой статье говорится, что это один из минусов дизайна материала 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> 
-1
JavaQuest 8 Янв 2017 в 03:23

3 ответа

Лучший ответ

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> 

Также Прю 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> 

Функциональные возможности меток с плавающей точкой можно найти здесь .

2
Community 23 Май 2017 в 12:24

Метка появляется, когда ввод сфокусирован:

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>
1
Alvaro 8 Янв 2017 в 01:12

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

0
Louis 8 Янв 2017 в 01:04