亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JS - 當輸入有值時向表單添加類

JS - 當輸入有值時向表單添加類

HUH函數 2022-12-22 11:23:02
我有一個表單,其中包含一個用于電子郵件地址的輸入字段。現在我想<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
查看完整描述

3 回答

?
慕仙森

TA貢獻1827條經驗 獲得超8個贊

這是使用 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);  

});

我在這里更新了你的筆。


查看完整回答
反對 回復 2022-12-22
?
蕭十郎

TA貢獻1815條經驗 獲得超13個贊

您可以收聽輸入元素的“輸入”事件并用于.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


查看完整回答
反對 回復 2022-12-22
?
三國紛爭

TA貢獻1804條經驗 獲得超7個贊

在這里,使用 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');

    }

    }


查看完整回答
反對 回復 2022-12-22
  • 3 回答
  • 0 關注
  • 124 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號