Html5输入占位符在输入数据时更改大小和位置

Question

我在我的银行网站上发现，当我将信息输入到输入字段时，初始占位符会将大小更改为更小，并被推送到输入字段的左上角。我发现在用户输入字段而不是占位符完全消失时，用户可以看到问题是非常有用的。关于如何最好地实施它的任何想法？

Answer 1

您正在寻找类似https://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/

的内容

这是text input样式

的新趋势

Answer 2

使用onchange JavaScript事件：

HTML表单：

<form id="myForm>
<input type="text" onchange="changeForm(this)" id="text">
</form>

JavaScript函数：

function changeForm(elm) {
elm[0].setAttribute("style", "height: 50px");
}