当移动到textarea之外时,textarea的占位符不可见

Question

我一直在关注这个小教程,将动画添加到输入字段的占位符.当输入字段被聚焦时,动画将占位符移出输入字段.

此动画在输入字段上完美地工作,并且占位符在输入字段上方可见,但是当我将此动画添加到textarea时,占位符一旦通过textarea的边缘就会消失.

 input,
textarea {
  margin: 30px 0 0 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{ 
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px);
 visibility: visible !important;
}

<input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
<textarea rows="8" cols="60" placeholder="Message *" required="required"></textarea>

这是一个证明问题的JSFiddle.

有没有人知道我怎么也可以在它上面显示textarea的占位符？

Answer 1

正如@somethinghere 的评论所提到的，当输入字段非空时，您将遇到可访问性/可用性问题，这会删除占位符。虽然与您原来的方法有些不同，但使用 CSS 定位、HTML 标签和 Flexbox 的组合可以实现相同的效果，并且在填充每个字段时不会丢失每个字段的指示符。

方法很简单：

• 将输入和标签元素包装在<div>elements 中。标签必须出现在相邻同级选择器的输入之后+才能起作用
• 使用 flexbox 将标签定位在输入之前，方法是使用 反转列方向flex-direction: column-reverse。这种方法的优点是您可以根据需要对元素重新排序，例如在移动屏幕等上。
• 当伴随的输入/文本区域处于焦点时，用于+通过更改标签的属性来移动标签top

这是一个概念验证示例：

div {
  display: flex;
  flex-direction: column-reverse;
  }
input,
textarea {
  display: block;
  font-family: 'Arial';
  font-size: 1em;
}
label {
  display: block;
  font-family: 'Arial';
  font-size: 1em;
  position: relative;
  top: 1.5em;
  left: .35em;
  transition: all .5s ease-in-out;
}
input:focus + label,
textarea:focus + label {
  top: 0;
  }

<div>
  <input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
  <label for="edit-field-name-0-value">Name *</label>
</div>
<div>
  <textarea rows="8" cols="60" placeholder="Message *" required="required" id="textarea0"></textarea>
  <label for="textarea0">Message *</label>
</div>

如果你想使用 CSS 变换而不是top定位，那也是可以的：

div {
  display: flex;
  flex-direction: column-reverse;
  }
input,
textarea {
  display: block;
  font-family: 'Arial';
  font-size: 1em;
}
label {
  display: block;
  font-family: 'Arial';
  font-size: 1em;
  position: relative;
  transform: translateY(1.5em);
  left: .35em;
  transition: all .5s ease-in-out;
}
input:focus + label,
textarea:focus + label {
  transform: translateY(0);
  }

<div>
  <input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
  <label for="edit-field-name-0-value">Name *</label>
</div>
<div>
  <textarea rows="8" cols="60" placeholder="Message *" required="required" id="textarea0"></textarea>
  <label for="textarea0">Message *</label>
</div>