jquery 如何禁用下一个按钮时,输入为空

o2g1uqev  于 5个月前  发布在  jQuery
关注(0)|答案(2)|浏览(77)

我特灵创建一个多个登录形式,每一个都很好,但我想禁用下一步按钮,如果电子邮件输入为空.输入类=“电子邮件”和按钮类=“btn-next”我将感谢任何帮助谢谢.

<sub>const pageBox = document.querySelector('.page-box');
const btnNext = document.querySelector('.btn-next');
const btnBack = document.querySelector('.btn-back');
const checkboxPass = document.querySelector('.checkbox-pass');
const passwordInput = document.querySelector('.password');
const loginTitle = document.querySelector('.loginTitle-text');
const userEmail = document.querySelector('.user-email');
const emailInput = document.querySelector('.email');

btnNext.onclick = (e) => {
    e.preventDefault();
    pageBox.classList.add('active-pass');
    setTimeout(() => passwordInput.focus(), 500);
    loginTitle.innerHTML = 'Welcome';
    userEmail.innerHTML = ''  + emailInput.value;
};

btnBack.onclick = (e) =>{
    e.preventDefault();
    pageBox.classList.remove('active-pass');
    loginTitle.innerHTML = 'Sign in';
    userEmail.innerHTML = 'Please continue,';
    emailInput.focus();
};

checkboxPass.onclick = () => {
    if(checkboxPass.checked) {
        passwordInput.type = 'text';
    }
    else{
       passwordInput.type = 'password';
    }
};
emailInput.addEventListener("btnNext", (e) => {
    preventDefault();
    btnNext.disabled()
    if(emailInput.value.length  > 0) {
        btnNext.disabled = 'true';
     }
     else{
        btnNext.disabled = 'false';
    } 
});
</sub>

字符串

8mmmxcuj

8mmmxcuj1#

1.没有btnNext事件,使用input(当输入改变时)
1.根据输入的值为按钮添加或删除disabled属性。
设置disabled="false"不像here解释的那样工作。

const btnNext = document.querySelector('.btn-next');
const emailInput = document.querySelector('.email');

emailInput.addEventListener("input", () => emailInput.value.length ? btnNext.removeAttribute('disabled') : btnNext.setAttribute('disabled', ''));

个字符

9rnv2umw

9rnv2umw2#

而不是您当前的代码,

emailInput.addEventListener("btnNext", (e) => {
    preventDefault();
    btnNext.disabled()
    if(emailInput.value.length  > 0) {
        btnNext.disabled = 'true';
     }
     else{
        btnNext.disabled = 'false';
    } 
});

字符串
尝试更改此代码,

emailInput.addEventListener("input", (e) => {
    e.preventDefault();

    if(emailInput.value.length  > 0) {
        btnNext.disabled = 'true';
     }
     else{
        btnNext.disabled = 'false';
    } 
});

相关问题