如何使用文本创建占位符

Question

我想像上面附图一样创建表单。可以在文本框中添加占位符。但是当用户按下键时，占位符丢失。当按下文本框内的按键时，我需要在文本框上方显示占位符。

Answer 1

#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 2

一些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 3

#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位置相对，标签位置绝对=＆gt;标签将重叠输入

• 我使用css进行输入：focus。当聚焦发生时，我扩展输入的填充顶部。

• 其余的是造型（选择）正确的行高，字体大小和填充以使其美观

Answer 4

您可以将html required，autofocus和pattern属性与RegExp ^[a-zA-Z]+(?:\s[a-zA-Z]+$|$)匹配，以匹配一个或多个a-z输入开头的字符不区分大小写，后跟空格字符，后跟一个或多个a-z字符，输入结束不区分大小写，或输入结束处理两个名字，例如"Billy Joe"，{{ 1}}，"Norma Jean";与"Sarah Jane"元素相邻的<label>元素; <input> css，:invalid，:valid; :before。

当:after input :invalid设置为border时，red设置为outline;将相邻的none元素label :before设置为content，将"das" label :after设置为content;在!设置:valid:focus label :before至content，"First Name" label至:after 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;
}

Answer 5

我有一个解决方案。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;