テキストでプレースホルダを作成する方法

Question

上記のようなフォームを作成したいと思います。テキストボックスにプレースホルダを追加できます。しかし、ユーザーがキープレースホルダーを押したとき。テキストボックス内のキーを押すと、テキストボックスの上にプレースホルダを表示する必要があります。

Answer 1

は、一つ以上のa-zを追いました例えば、"Billy Joe","Norma Jean","Sarah Jane"のように、入力の終わり、または2つのファーストネームを扱うための入力の終わりで大文字小文字を区別しない文字。 <label>要素は<input>要素に隣接する。 css:invalid,:valid,:before; :after。

inputが:invalidがnoneにredからborder、outlineに設定されています。隣接して設定されるlabel要素:beforecontent~、label:aftercontent~!; :valid:focusであなたは何を試してみました？UTF-8"CHECK MARK"✓

@charset "UTF-8"; 
 
#input { 
 
    height: 3.14em; 
 
    left: 0px; 
 
    outline: none; 
 
    padding: 6px; 
 
    margin: 4px; 
 
    width: 150px; 
 
} 
 
#input:valid { 
 
    border: 1px solid green; 
 
    box-shadow: .015em .015em .015em green; 
 
} 
 
#input:invalid { 
 
    border: 1px solid red; 
 
    box-shadow: .015em .015em .015em red; 
 
} 
 
#input:invalid + [for="input"]:before { 
 
    content: "das"; 
 
} 
 
#input + [for="input"]:after { 
 
    font-weight: bold; 
 
    left: 160px; 
 
    top: 12px; 
 
    position: absolute; 
 
} 
 
#input:invalid + [for="input"]:after { 
 
    content: "!"; 
 
    color: red; 
 
} 
 
#input:valid + [for="input"]:after { 
 
    content: "\2713"; 
 
    color: green; 
 
} 
 
#input:valid + [for="input"]:before { 
 
    content: "First Name"; 
 
    color: #ccc; 
 
} 
 
label[for="input"]:before { 
 
    position: absolute; 
 
    left: 12px; 
 
    padding: 6px; 
 
}

<meta charset="UTF-8" /> 
 
<input id="input" type="text" pattern="^[a-zA-Z]+(?:\s[a-zA-Z]+$|$)" required autofocus/> 
 
<label for="input"></label>

Answer 2

#lbl{ 
 
    color:green; 
 
} 
 
#in{ 
 
    border:none 
 
} 
 
#in,#in_container,#lbl{ 
 
    background:white 
 
} 
 
#in_container{ 
 
    display:inline-block; 
 
    border:solid 1px black; 
 
}

<div id="in_container"> 
 
<span id="lbl">First Name</span> 
 
<br> 
 
<input type='text' id="in"> 
 
</div>

Answer 3

いくつかのCSSマジック：

.input-group * { 
 
    left: 0; 
 
    position: absolute; 
 
    font-family: sans-serif; 
 
} 
 

 
.input-group input { 
 
    height: 30px; 
 
    font-size: 20px; 
 
    padding-top: 12px; 
 
} 
 

 
.input-group label { 
 
    padding-left: 3px; 
 
    padding-top: 2px; 
 
    opacity: .5; 
 
}

<div class="input-group"> 
 
    <input id="first-name" type="text"> 
 
    <label for="first-name">First Name</label> 
 
</div>

あなたはあなたのために働いて解を得るまでは基本的には、ちょうどサイズで遊びます。私は、それぞれの "入力ボックス"セクションをグループ化し、テキスト入力にスーパーインポーズされたラベルで構成されています。ここで

Answer 4

#container { 
 
    position: relative; 
 
} 
 

 
#container * { 
 
    font-size: 20px; 
 
} 
 

 
#my-input { 
 
    height: 30px; 
 
} 
 

 
#lbl-my-input { 
 
    line-height: 1.5; 
 
    position: absolute; 
 
    color: #bebebe 
 
} 
 

 
#my-input:focus { 
 
    padding-top: 40px; 
 
}

<div id="container"> 
 
    <label id="lbl-my-input" for="my-input">First</label> 
 
    <input id="my-input" type="text"> 
 
</div>

私の考えです：

• 私はdivの
• にラベルと入力を入れて、私はdivの位置を作り、ラベル位置絶対=>ラベルがします重複した入力

• 私は入力のためのCSSを使用します：フォーカス。フォーカスが起こると、入力のパディングトップが拡張されます。

• 残りは

それを美しくするために（選択）右行の高さ、フォントサイズ、およびパディングをスタイリングされ

Answer 5

私は、このためのソリューションを持っています。あなたがスペース文字に続いて、入力の先頭に1つ以上のa-z文字の大文字小文字を区別しません一致するhtmlrequired、autofocusとRegExp^[a-zA-Z]+(?:\s[a-zA-Z]+$|$)とpattern属性を使用することができます

<label style="visibility: hidden;" id="label">User Name</label> 
 
<input id="textField" type="text" placeholder="User Name" onfocus="showLabel()" onblur="hideLabel()"></input> 
 
<script> 
 
    function showLabel() { 
 
     var label = document.getElementById("label"); 
 
     var textField = document.getElementById("textField"); 
 
     textField.placeholder=""; 
 
     label.style.visibility = "inherit"; 
 
    } 
 
    function hideLabel() { 
 
     var label = document.getElementById("label"); 
 
     var textField = document.getElementById("textField"); 
 
     textField.placeholder="User Name"; 
 
     if (!textField.value) { 
 
      label.style.visibility = "hidden"; 
 
     } 
 
    } 
 
</script>