Как отключить изчезание placeholder после ввода текста?

Question

[dez64ru]

Например я хочу placeholder после нажатия в строку ввода поднять вверх(а-ля meterial design), всё нормально он поднимается. Но когда вводишь хоть 1 букву, placeholder пропадает.

<div class="input"><input name="login" type="text" placeholder="Логин":><br></div>
			<div class="input"><input name="password" type="password" placeholder="Пароль:" onkeypress="placeholder='Пароль:';"><br></div>

.input input::-webkit-input-placeholder       {position: relative; bottom: 0vh;  transition: bottom 0.1s ease-in;}
.input input::-moz-placeholder                {position: relative; bottom: 0vh;  transition: bottom 0.1s ease-in;}
.input input:-moz-placeholder                 {position: relative; bottom: 0vh;  transition: bottom 0.1s ease-in;}
.input input:-ms-input-placeholder            {position: relative; bottom: 0vh;  transition: bottom 0.1s ease-in;}
.input input:focus::-webkit-input-placeholder {position: relative; bottom: 2.3vh; transition: bottom 0.1s ease-in;}
.input input:focus::-moz-placeholder          {position: relative; bottom: 2.3vh; transition: bottom 0.1s ease-in;}
.input input:focus:-moz-placeholder           {position: relative; bottom: 2.3vh; transition: bottom 0.1s ease-in;}
.input input:focus:-ms-input-placeholder      {position: relative; bottom: 2.3vh; transition: bottom 0.1s ease-in;}

Answer 1

[Максим Тимофеев]

Надо не менять плейсхолдер, а читать его содержимое и генерить блок с таким же содержимым. Можно сделать это при загрузке страницы. Убрать плейсхолдер и сделать блок маску, с которым потом манипулировать.