这种输入框如何做出来？

Question

请看这个输入框，没有鼠标焦点的时候，使用placeholder可以产生框内的内容

input框获得鼠标输入焦点后，

Email address or other Red Hat Login ID还在框内，你输入帐号后，submit form的时候，如何保证仅仅发送你输入的帐号？
请问，这是如何做到的？

https://developers.redhat.com...

Answer 1

【思路】：楼上已经给出，例子中是用bottom控制，实际上这些效果不是太复杂的都可以通过F12控制台查看代码，
看是如何变化的即可，这里你可以勾选focus状态便于查看效果

【Demo】：https://jsbin.com/jekufajipi/...

Answer 2

submit的时候你可以手动发送数据，而不是调用默认的表单提交，就不用担心
发送的数据问题了

submit = function(ev){
    ev.prevenDefault();
    ajax({
        ...
    })
}

Answer 3

看代码里就有啊，input下边有个label就是placeholder，它俩在一个div里，input:focus时带动label的font-size变小，再加点缓动啥零七碎八的修饰下就行了。

Answer 4

要让我做的话，label和input在同一个div里，label绝对定位
input focus的时候，input的padding-top增加，label的font-size变小
剩下的是一些细节的微调