javascript - 使用 JavaScript 根据输入值长度/状态向元素添加类

Question

我正在尝试为我的字段创建“浮动标签”效果。但是，我遇到了困难，因为 HTML 代码的结构使得它无法仅使用 CSS 来实现，因为没有办法使用 CSS 组合符 ( >, +, ~) 并且我没有能力更改 HTML代码。

我的代码：

label {display: block; position: absolute; margin: 15px 0 0 12px; color: #606060; font-family: "Arial";}

input {display: block; padding: 15px 12px; border: 1px solid #bbb; border-radius: 5px; width: 300px;}

<p class="container">
   <label for="input">
      Label&nbsp;
   </label>
   <span class="input-wrapper">
      <input type="input-text" class="input" name="input" id="input" placeholder="">
   </span>
</p>

但我相信，如果我能够container根据字段的输入/状态给出一个 CSS 类，那将是可能的。如果 的值大于 0 ( > 0 ) ，我想给container类。也许当它也被关注时。用 JavaScript 可能吗？display-floating-labelinputinput

我试过了：

$(document).ready(function() {
  var formFields = $('.container');
  
  formFields.each(function() {
    var field = $(this);
    var input = field.find('input');
    var label = field.find('label');
    
    function checkInput() {
      var valueLength = input.val().length;
      
      if (valueLength > 0 ) {
        label.addClass('display-floating-label')
      } else {
            label.removeClass('display-floating-label')
      }
    }
    
    input.change(function() {
      checkInput()
    })
  });
});

但它没有用。我对 JavaScript 不是很熟悉，所以如果有人能帮助我，我将不胜感激。

这是我想要实现的目标：

*我不能改变 HTML 代码的结构，我只能使用我所拥有的。

Answer 1

试试下面的代码片段。

$(document).ready(function() {
  
    $('.input').each(function(){
        if( $(this).val() !='' ){
            $(this).closest('.container').addClass('display-floating-label');
        }
    });
  
    $('.input').on('input', function() {
    
        var valueLength = $(this).val().length;
      
        if (valueLength > 0 ) {
            $(this).closest('.container').addClass('display-floating-label');
        } else {
            $(this).closest('.container').removeClass('display-floating-label');
        }

    });
  
});

label {position: absolute;margin: 15px 0 0 12px;}
.display-floating-label label {position: absolute; margin: 10px 0 0 12px; color: #606060; font-family: "Arial";font-size:10px;}
input {display: block; padding: 18px 12px 12px 12px; border: 1px solid #bbb; border-radius: 5px; width: 300px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="container">
   <label for="input">
      Label&nbsp;
   </label>
   <span class="input-wrapper">
      <input type="input-text" class="input" name="input" id="input" placeholder="">
   </span>
</p>
<p class="container">
   <label for="input">
      Label&nbsp;
   </label>
   <span class="input-wrapper">
      <input type="input-text" class="input" name="input2" id="input2" placeholder="" value="Prefill">
   </span>
</p>