プレースホルダテキストと浮動テキスト入力（ユーザーが入力フィールドをクリックしたときに上に移動する）を作成しようとしています。プレースホルダとフローティング入力テキストを同時に使用することは可能ですか？
下記の2つのケースを組み合わせたいと思います。
事例1（ "住所" は上に移動します）：
ケース2（ "123例ストリート" 消えます）：
現在、それは上書きされます：
を
<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>
バニラJS：
input = document.getElementById("input_name");
inputP = input.getAttribute("placeholder");
input.placeholder = "";
input.onfocus = function() {
\t this.placeholder = inputP;
}
input.onblur = function() {
\t 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>フロートラベル機能がhere
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>
この記事では、それは（私は図書館liteの材料設計を使用しています）材料設計 http://bradfrost.com/blog/post/float-label-pattern/
コード部分の追加の短所の一つだと言います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;
}
からラベルは、入力がフォーカスされたときに表示されます。
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>
ことが可能です。何か試しましたか？いくつかのコードを入力してください。 – magreenberg
@magreenbergコードを追加しました。 input要素のplaceholder = "123 Example"を追加すると、浮動テキストが上書きされます – JavaQuest
ユーザーが入力をクリックすると、同時にテキストを表示するか、プレースホルダからラベル付けする必要がありますか？ （プレースホルダのテキストは、入力が空のときに表示されます： "[email protected]"と、ユーザがクリックしてメールを入力すると上に浮かんでいる "email"ラベルに変わります） – LordNeo