Question

我想在用户点击文本框时使用占位符值作为标题。例如，在此图片Image One中，占位符值为“电子邮件或电话”，当用户点击它时，它就会成为此文本框的标题，如第二张图片Image Two所示。如果您没有正确理解，那么请单击文本框中的占位符值到顶部，然后单击外部时，该值将成为占位符，请转到gmail.com（登录的新外观）。我想要的功能完全正确，但我无法做到。帮助我。

Answer 1

您可以查看

HTML代码

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

CSS代码

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

检查这个小提琴https://jsfiddle.net/60Lfj34s/

Answer 2

我尝试了很长时间来为此提出一个纯CSS解决方案，但是有一个真正的问题是<input>元素不会采用::before伪元素，所以你不能使用（例如）：

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

所以这里是一个javascript解决方案：

var myInput = document.getElementsByTagName('input')[0];
var myPlaceHolder = myInput.getAttribute('placeholder');

function addInputLabel() {

if (document.getElementsByClassName('my-label').length < 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-label {
height: 16px;
line-height: 16px;
font-size: 11px;
color: rgb(255, 0, 0);
}

<input placeholder="Placeholder Text" />

如何在用户点击文本框时将占位符值用作文本框的标题？

2 个答案: