Question

我创建了一个onClick标签切换效果，但面临一个问题，即当用户输入/输入输入框标签中的任何值应该保持在顶部而不是重叠或降低值。

you will find here

Js代码

function move(elem){
    var a = document.getElementsByTagName('label')
        for(i=0; i< a.length; i++){
            a[i].classList.remove('active');
        }
        elem.classList.add('active');

}

提前致谢！

Answer 1

这是一个很好的效果，你可以在不使用任何JavaScript的情况下在CSS中完成同样的事情。

如果输入字段已聚焦或具有值，则下面的代码会更改标签的样式。

请注意，标签需要pointer-events: none，以便在点击标签时可以聚焦其背后的输入：

.input-field {
  margin:50px;
  position:relative;
  width:204px;
}

input {
  border:1px solid #ccc;
  width:200px;
  height:3rem;
  font-size:1rem;
  position:relative;
}

label {
  pointer-events: none;
  cursor: text;
  font-size: 1rem;
  left: 0rem;
  position: absolute;
  top: 0.8rem;
  transition: all 0.2s ease-out 0s;
}

.input-field input:not(:invalid) + label,
.input-field input:focus + label {
  background: yellow; 
  top: -35px;
  font-size:0.7rem;
}

<div class="input-field">
  <input type="text" name="name" required="">
  <label>First Name</label>
</div>

<div class="input-field">
  <input type="text" name="name" required="">
  <label>Last Name</label>
</div>

如果您需要支持＆lt; = IE9，上述操作将无效。在这种情况下，将需要使用JavaScript。

将focus和blur个事件附加到输入：

<input type="text" name="name" required="" 
       onfocus="ifocus(this)"
       onblur ="iblur(this)"
>

function nextElementSibling(el) {
  do { el = el.nextSibling } while ( el && el.nodeType !== 1 );
  return el;
}

function ifocus(el) {
  nextElementSibling(el).className= 'active';
}

function iblur(el) {
  if(!el.value.trim()) {
    nextElementSibling(el).className= '';
  }
}

Fiddle

另请注意，rem单位无法在＆lt; = IE8中使用，transition将无法在＆lt; = IE9中使用。如果您希望动画在这些版本中运行，则需要使用JavaScript完全编写它。

Answer 2

您最有可能想要使用focus和blur事件。

Answer 3

在onfocus（）中调用move函数;事件。请注意，您不应该使用内联调用方法。您应该使用事件监听器。

类似

document.getElementById('elementId').addEventListener('focus',move);

Answer 4

好问题还不清楚还在尝试。从你的小提琴我看到的问题是，一旦输入值，标签不应该像现在这样做。如果是的话

function move(elem){
    var a = document.getElementsByTagName('label')
    elem.classList.add('active');
}

将是更好的选择。

当输入值不为空时，标签标签应保持在顶部

4 个答案: