JS - 当输入有值时向表单添加类

Question

我有一个表单，其中包含一个用于电子邮件地址的输入字段。现在我想<form>在输入有价值时添加一个类，但我不知道该怎么做。当输入有值时，我正在使用这段代码向标签添加一个类，但我不能让它也适用于：function checkForInputFooter(element) {        const $label = $(element).siblings('.raven-field-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.raven-field').each(function() {    checkForInputFooter(this);});// The lines below (inside) are executed on change & keyup$('input.raven-field').on('change keyup', function() {    checkForInputFooter(this);  });笔：https ://codepen.io/mdia/pen/gOrOWMN

Answer 1

这是使用 jQuery 的解决方案：

function checkForInputFooter(element) {

    // element is passed to the function ^

        

    const $label = $(element).siblings('.raven-field-label');      

    var $element = $(element);

    if ($element.val().length > 0) {

        $label.addClass('input-has-value');

        $element.closest('form').addClass('input-has-value');

    } else {

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

        $element.closest('form').removeClass('input-has-value');

    }

}

      

// The lines below are executed on page load

$('input.raven-field').each(function() {

    checkForInputFooter(this);

});

    

// The lines below (inside) are executed on change & keyup

$('input.raven-field').on('change keyup', function() {

    checkForInputFooter(this);  

});

我在这里更新了你的笔。

Answer 2

您可以收听输入元素的“输入”事件并用于.closest(<selector>)添加或删除类

$('input').on('input', function () {

  if (!this.value) {

    $(this).closest('form').removeClass('has-value');

  } else {

    $(this).closest('form').addClass('has-value');

  }

})

编辑：https ://codepen.io/KlumperN/pen/xxVxdzy

Answer 3

在这里，使用 javascript vanilla。我选择了标签标签和表单标签，并根据元素值添加/删除了类，但首先您应该将 id="myForm" 添加到您的表单 html 标签中。祝你好运。

function checkForInputFooter(element) {

    // element is passed to the function ^

    let label = element.parentNode.querySelector('.raven-field-label');

    let myForm = document.getElementById("myform");

    let inputValue = element.value;

    if(inputValue != "" && inputValue != null){          

      label.classList.add('input-has-value');

      myForm.classList.add('input-has-value');

    }

    else{

      label.classList.remove('input-has-value');

      myForm.classList.remove('input-has-value');

    }

    }