Javascript 当用户单击文本框时，如何使用占位符值作为文本框的标题？

我想在用户单击文本框时使用占位符值作为标题。 例如，在此图像中，占位符值为“电子邮件或电话”，当用户单击它时，它将成为此文本框的标题，如第二幅图像所示。如果您没有正确理解，请访问gmail.com（登录的新外观），当您单击文本框时，占位符值位于顶部，当您单击外部时，该值将成为占位符。我想要的正是这个功能，但我无法做到。 帮帮我。

你可以检查一下

HTML代码

<div>
  <input type="text" class="inputText" />
  <span class="floating-label">Email or phone</span>
</div>

---

检查这把小提琴

我花了很长时间试图想出一个纯CSS的解决方案，但是真正的问题是

元素不会在

伪元素之前使用
：：所以不能使用（例如）：

下面是一个javascript解决方案：


var myInput=document.getElementsByTagName（'input'）[0]；
var myPlaceHolder=myInput.getAttribute（'placeholder'）；
函数addInputLabel（）{
if（document.getElementsByClassName（'my-label'）。长度<1）{
var myLabel=document.createElement（'div'）；
myLabel.textContent=myPlaceHolder；
myLabel.classList.add（'my-label'）；
document.body.insertBefore（myLabel，myInput）；
}
}
myInput.addEventListener（'keypress'，addInputLabel，false）
.my标签{
高度：16px；
线高：16px；
字体大小：11px；
颜色：rgb（255,0,0）；
}
你好，帕雷什·马霍迪亚，是的，你还需要什么帮助吗？谢谢兄弟帮我。
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

input:focus::before {
content: attr(placeholder);
}