占位符的模拟答案

【问题标题】：Simulation of a placeholder占位符的模拟
【发布时间】：2017-06-03 21:21:48
【问题描述】：

我有一个不想接触的 Wordpress 插件，所以我希望我的目标可以仅通过 CSS 来实现。我在 Chrome 开发者工具中摆弄了（不是双关语）CSS，但最后总是一团糟。

我想要的是位于输入字段顶部的标签。 “在顶部”表示 Z 轴而不是 Y 轴。下面是 HTML 结构。提前感谢您开动脑筋。

<p>
  <label>Name<br>
    <span>
      <input type="text" name="your-name" value="" size="40">
    </span>
  </label>
</p>

【问题讨论】：

我明白你的意思。但是，输入到输入中的文本看起来如何，上面有标签？
如果不更改标记，则无法使用 CSS 完成。您至少需要将文本（“名称”）包装在一个跨度中，这样它就可以被绝对定位。即便如此，文本也会将输入的文本叠加到输入中。
我会将标签移动到现在的位置，并在输入字段的焦点上进行转换。

标签： html css

【解决方案1】：

通过一个小的标记更改和一个脚本，您可以做到这一点

脚本只是简单地将用户值附加到它的 value 属性中，因此可以使用 CSS 来设置样式

p label {
  position: relative;
}
p label input {
  margin-top: 10px;
}
p label input[required] + span::after {
  content:  ' *';
  color: red;
}
p label span {
  position: absolute;
  top: 2px;
  left: 5px;
  pointer-events: none;
  transition: top .5s;
}
p label input:not([value=""]) + span,
p label input:focus + span {
  top: -20px;
}

<p>
  <label>
      <input oninput="this.setAttribute('value', this.value)" type="text" name="your-name" value="" size="40" required>
      <span>Name</span>
  </label>
</p>

由于更改HTML5 input's placeholder with CSS 是一个热门话题，这里有更多替代方案，具有更简单、更可重用的标记结构

.placeholder {
  position: relative; padding-top: 15px;
}
.placeholder label {
  position: absolute; top: 17px; left: 5px;
  pointer-events: none; transition: top .5s;
}
.placeholder input[required] + label::after {
  content:  ' *'; color: red;
}
.placeholder input:not([value=""]) + label,
.placeholder input:focus + label {
  top: -5px;
}

<div class="placeholder">
  <input oninput="this.setAttribute('value', this.value)" type="text" name="name" value="" required>
  <label>Name</label>
</div>

由于脚本非常小，我将其应用到内联，尽管当然可以使用外部事件处理程序添加相同的行为，像这样，并针对多个input。

window.addEventListener('load', function() {
  var placeholders = document.querySelectorAll('.placeholder input');
  for (var i = 0; i < placeholders.length; i++) {
    placeholders[i].addEventListener('input', function() {
      this.setAttribute('value', this.value);
    })
  }
})

.placeholder {
  position: relative; padding-top: 15px;
}
.placeholder + .placeholder {
  margin-top: 10px;
}
.placeholder label {
  position: absolute; top: 17px; left: 5px;
  pointer-events: none; transition: top .5s;
}
.placeholder input[required] + label::after {
  content:  ' *'; color: red;
}
.placeholder input:not([value=""]) + label,
.placeholder input:focus + label {
  top: -5px;
}

<div class="placeholder">
  <input type="text" name="name" value="" required>
  <label>Name</label>
</div>
<div class="placeholder">
  <input type="text" name="email" value="" required>
  <label>Email</label>
</div>
<div class="placeholder">
  <input type="text" name="address" value="">
  <label>Address</label>
</div>

【讨论】：

@Diego 谢谢...它可以:)
仔细想想，这个答案实际上在通用工具包中非常有用。它消除了对实际占位符进行样式设置的需要，该占位符恰好是 second most popular CSS question on this site（通过投票）。干得好，@LGSon。
我想为标签设置动画并将其移回输入字段上方的焦点（不是问题，我会弄清楚如何做到这一点）。它避免了对 oninput 的需要，因此 HTML 可以保持原样。
漂亮！再次感谢。
当然，我不明白为什么不这样做。然而，已经有 42 个答案了，所以不要期望得到很多关注，至少在你被投票之前。您还可以在该问题的评论部分中添加指向此答案的链接。

【解决方案2】：

可以在输入标签中使用placeholder属性：

<p>
  <label>Name<br>
    <span>
      <input type="text" name="your-name" value="" placeholder="Name" size="40">
    </span>
  </label>
</p>

【讨论】：

是的，我知道。但这需要更改插件代码，我想避免这种情况。不过还是谢谢。