如何用文本创建占位符

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>

基本上，只需尝试调整大小，直到找到适合您的解决方案。我将每个 "input box" 部分分组，它们由叠加在文本输入上的标签组成。

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位置相对，标签位置绝对=>标签将重叠输入
我用 css 代替 input:focus。发生聚焦时，我会扩展输入的填充顶部。
剩下的就是样式（选择）正确的行高、字体大小和填充以使其美观

Answer 4

我有一个解决方案。

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

Answer 5

您可以使用 html required、autofocus 和 pattern 属性与 RegExp ^[a-zA-Z]+(?:\s[a-zA-Z]+$|$) 匹配一个或多个 a-z 字符在输入开头不区分大小写，后跟 space 个字符，后跟一个或多个 a-z 个字符，在输入结尾不区分大小写，或者输入结尾处理两个名字，例如 "Billy Joe"、"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: "13";
  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>

如何用文本创建占位符

How to create placeholder with text

html

javascript

css

jquery

placeholder