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

Question

我一直在关注此small tutorial以向动画输入字段的占位符添加动画。当输入字段被聚焦时，动画将占位符移出输入字段。

此动画在输入字段上完美运行，占位符在输入字段上方可见，但是当我将此动画添加到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's comment所述，当输入字段为非空时，您将遇到可访问性/可用性问题，这将删除占位符。尽管与原始方法略有不同，但使用CSS定位，HTML标签和flexbox的组合可以实现相同的效果，而不会在每个字段填充时丢失指示符。

方法很简单：

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

这是一个概念验证示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您想使用CSS转换而不是top定位，那么这也是可能的：

＆＃13;

＆＃13;

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);
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

浏览器似乎隐藏了<textarea>的占位符文本。规避此行为的一种简单方法是为textarea::-webkit-input-placeholder元素提供position: absolute;。 然而，这有一个缺点，就是你无法正确定位。

div {
  position: relative;
  margin: 30px;
}

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

textarea::-webkit-input-placeholder {
  position: absolute;
}

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

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

Answer 3

这是一种解决方法，您必须添加包装标记并添加以下样式：

.textarea-wrapper {
  position: relative;
}
textarea::-webkit-input-placeholder {
 position: absolute;
 top: 0;
 left: 0;
}

JSFiddle

截图：

Answer 4

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;
 position: absolute;
}

只需在占位符聚焦时将位置添加为绝对值

Answer 5

BTW我只是创建CSS：

input.form-control::-webkit-input-placeholder {
    transition: transform .3s ease-out;
    transform-origin: 0 0;
}
input.form-control:focus::-webkit-input-placeholder {
    transform: translateY(-10px) scale(0.8);
    transform-origin: 0 0;
}

对于exmpl，例如http://www.rusfond-finans.ru/loans/orderzaim.phtml