Question

我被告知，在显示和隐藏文本之间进行动画更改，例如alpha更改是不可能的。

Answer 1

如果你有这样的输入

<input type="text" placeholder="the placeholder">

您可以将其包装在label中，以便将占位符文本从输入“移动”到标签范围：

<label class='placeholder'>
  <input type="text" placeholder="">
  <span>the placeholder</span>
</label>

我写了一个小的jquery函数，它为任何定义了占位符属性的输入执行重新排列。

如果您的输入具有required属性，那么您可以利用CSS invalid选择器，而不需要keyup事件。见这里：http://jsfiddle.net/qNmjw/2/

Answer 2

是的，很好...... 这适用于大多数新浏览器，它使用特定于供应商的选择器。我建议您自己测试，以确保它涵盖您选择的浏览器（和版本）...

考虑HTML：

<input type="text" placeholder="placeholder's text" />

使用下一个CSS：

input {transition:color 1s;}
input::-webkit-input-placeholder { /* WebKit browsers */
    color:#0000ff;transition:color 1s;
}
input::-moz-placeholder { /* Mozilla Firefox */
    color:blue;transition:color 1s;
}
input:-ms-input-placeholder { /* IE 10+ */
    color:blue;transition:color 1s;
}
input:focus::-webkit-input-placeholder {color:#ff0000;}

在此播放：http://jsfiddle.net/3g2J7/1/

是否可以为HTML <input />占位符文本更改设置动画

2 个答案: