Question

我在输入文件中做了一个浮动标签，如下所示。而且它的工作正常。但是当我删除required输入字段时，浮动标签不起作用（尽管我不需要required字段）。请提出一些解决此问题的方法。

＆＃13;

input:focus~.floating-label,
input:not(:focus):valid~.floating-label {
  top: 6px;
  bottom: 12px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  text-transform: uppercase;
  transition: 0.2s ease all;
  color: #b2b2b2;
}

＆＃13;

<input type="text" id="floating_name" value="" required/>
<span class="floating-label">Enter</span>

＆＃13;

Answer 1

选择器input:focus在获得焦点时选择输入，如果input:not(:focus):valid不是焦点，则选择器valid input选择输入。
     使用required attribute并且不在其中输入任何值时
A。：

1）在对焦前和失去焦点时：没有选择任何东西。（原始状态）

2）焦点输入无效后，用input:focus选择。
     删除required属性时
B ：

1）在使用input:not(:focus):valid进行焦点选择之前。

2）使用input:focus进行焦点选择后。

因此，输入将永远被选中，而.floating-label将不会返回到原始状态。

在你的问题中，你说：＆＃34;我不需要所需的文件＆＃34;

因此，请删除input:not(:focus):valid~.floating-label。

完整代码：

＆＃13;

input:focus ~ .floating-label {
  top: 6px;
  bottom: 12px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
text-transform: uppercase;
transition: 0.2s ease all;
color: #b2b2b2;
}

＆＃13;

 <input type="text" id="floating_name" value="">
 <span class="floating-label">Enter</span>

＆＃13;

Answer 2

:valid选择器仅适用于有限制的表单元素。当您删除CSS的required部分不再适用时。我删除了input:not(:focus):valid ~ .floating-label，然后再次运行。

＆＃13;

input:focus~.floating-label {
  top: 6px;
  bottom: 12px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  text-transform: uppercase;
  transition: 0.2s ease all;
  color: #b2b2b2;
}

＆＃13;

<input type="text" id="floating_name" value="" />
<span class="floating-label">Enter</span>

＆＃13;

Answer 3

请尝试另一种方法，该方法可以没有'required'属性

使用'：placeholder-shown'

：显示占位符的CSS伪类表示当前正在显示占位符文本的任何input或textarea元素。

因此有2种情况下标签会浮动

占位符不可见时（即字段中有数据时）
重点关注的领域

还有1个标签不浮动的情况

占位符可见时（即字段中没有数据时）

小提琴：floating label demo

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}
input:placeholder-shown + .form-control-placeholder{
  margin-top:0%;
}

input + .form-control-placeholder ,
.form-control:focus + .form-control-placeholder{
  position: absolute;
  transition: all 200ms;
  margin-left:-25%;
  margin-top:-3%;
}

<br><br>
<div class="form-group">
  <input type="text" id="name" class="form-control" placeholder=" " >
  <label class="form-control-placeholder" for="name">Name</label>
</div>

Answer 4

 function checkForInput(element) {
        // element is passed to the function ^

        const $label = $(element).siblings('label');

        if ($(element).val().length > 0) {
            $label.addClass('input-has-value');
        }

         else {
            $label.removeClass('input-has-value');
        }
    }

    // The lines below are executed on page load
    $('input').each(function () {
        checkForInput(this);
    });

    // The lines below (inside) are executed on change & keyup
    $('input').on('change keyup', function () {
        checkForInput(this);
    });

     $('input').focus(function () {
         const $label = $(this).siblings('label');
         $label.addClass('input-has-value');
    });

Answer 5

尝试一下。使用input：not（：placeholder-shown）应该可以正常工作：

input:focus ~ .floating-label,
input:not(:placeholder-shown) ~ .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;
}

<div>
  <input placeholder="" type="text" class="inputText" />
  <span class="floating-label">Your email address</span>
</div>

删除必需属性后浮动标签不起作用

5 个答案: