ساخت یک ورودی 6 رقمی رمز عبور در جاوا اسکریپت ساده

Summarize this content to 400 words in Persian Lang

در این آموزش، یک سیستم ورودی رمز عبور یکپارچه برای یک کد فعال سازی 6 رقمی ایجاد می کنیم. این تنظیمات کاربر پسند بودن را تضمین می‌کند، از تایپ یا چسباندن مستقیم کد پشتیبانی می‌کند و با وارد کردن همه ارقام، عملکرد تأیید را فعال می‌کند.

بخش 1: ساختار HTML

با فرمی شروع کنید که شامل:

یک مکان نگهدار برای فیلدهای ورودی رمز عبور.
لینکی برای ارسال مجدد کد

در اینجا HTML به روز شده آمده است:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بخش 2: جاوا اسکریپت برای ورودی های رمز عبور

ما شش فیلد ورودی را به صورت پویا ایجاد می‌کنیم، تعاملات کاربر را مدیریت می‌کنیم و پس از تکمیل، منطق تأیید را راه‌اندازی می‌کنیم.

مرحله 1: به صورت پویا فیلدهای ورودی را اضافه کنید

const codeActivationWrapper = document.querySelector(‘.app-code-activation-wrapper’);
const numOfFields = 6;

// Create and append six input fields
for (let i = 0; i < numOfFields; i++) {
const input = document.createElement(‘input’);
input.type=”text”;
input.className=”form-control app-activation-code-input”;
input.maxLength = 1;
codeActivationWrapper.appendChild(input);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این اسکریپت شش فیلد ورودی را به آن اضافه می کند .app-code-activation-wrapper div، هر کدام محدود به یک کاراکتر با استفاده از maxLength.

مرحله 2: مدیریت رویدادهای چسباندن

به کاربران اجازه دهید تا کد کامل را جایگذاری کنند. اگر متن چسبانده شده معتبر است، آن را در فیلدهای ورودی تقسیم کنید.

const fields = document.querySelectorAll(‘.app-activation-code-input’);

fields.forEach((field, index) => {
field.addEventListener(‘paste’, (event) => {
event.preventDefault();
const pasteData = (event.clipboardData || window.clipboardData).getData(‘text’).trim();

if (/^\d{6}$/.test(pasteData)) {
// Distribute pasted digits into input fields
[…pasteData].forEach((char, idx) => {
if (fields[idx]) fields[idx].value = char;
});
fields[5].focus(); // Focus the last field
verifyActivationCode(); // Call verification
}
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2228+ رایگان منابع برای توسعه دهندگان!! ❤️ 😍🥳 (به روز رسانی روزانه)

بیش از 1400 قالب HTML رایگان359+ مقاله رایگان خبری69+ درخواست رایگان هوش مصنوعی323+ کتابخانه کد رایگان52+ قطعه کد رایگان و Boilerplates برای Node، Nuxt، Vue، و موارد دیگر!25+ کتابخانه آیکون منبع باز رایگان

برای دسترسی رایگان به گنجینه منابع از dailysandbox.pro دیدن کنید!

مرحله 3: مدیریت ورودی و ناوبری

به طور خودکار به فیلد بعدی در ورودی بروید و پس‌سپیس را برای پیمایش مدیریت کنید.

fields.forEach((field, index) => {
field.addEventListener(‘input’, () => {
if (field.value && index < fields.length – 1) {
fields[index + 1].focus();
}
checkCompletion(); // Check if all fields are filled
});

field.addEventListener(‘keydown’, (event) => {
if (event.key === ‘Backspace’ && !field.value && index > 0) {
fields[index – 1].focus();
}
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4: اتمام را بررسی کنید

وقتی هر شش فیلد پر شد، مقادیر آنها را به هم متصل کرده و آن را فعال کنید verifyActivationCode تابع

const checkCompletion = () => {
const activationCode = Array.from(fields).map((field) => field.value).join(”);
if (activationCode.length === 6) {
verifyActivationCode(activationCode);
}
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 5: منطق تأیید

فرآیند تأیید را با تابعی شبیه سازی کنید که کد را به یک سرور باطن ارسال می کند.

const verifyActivationCode = (activationCode) => {
console.log(‘Verifying code:’, activationCode);

const spinner = document.createElement(‘div’);
spinner.className=”spinner”;
document.body.appendChild(spinner);

// Simulate an AJAX request
setTimeout(() => {
spinner.remove();
if (activationCode === ‘123456’) {
alert(‘Code verified successfully!’);
} else {
alert(‘Invalid code. Try again.’);
fields.forEach((field) => (field.value=””));
fields[0].focus();
}
}, 2000);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

قسمت 3: رسیدگی به پیوند ارسال مجدد

قابلیتی برای ارسال مجدد کد فعال سازی اضافه کنید.

const resendLink = document.querySelector(‘.app-code-activation-resend’);

resendLink.addEventListener(‘click’, (event) => {
event.preventDefault();

// Simulate a resend action
resendLink.setAttribute(‘data-sent’, ‘true’);
setTimeout(() => {
resendLink.setAttribute(‘data-sent’, ‘false’);
alert(‘Activation code resent!’);
}, 5000);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد جاوا اسکریپت را کامل کنید

این اسکریپت کامل است:

const codeActivationWrapper = document.querySelector(‘.app-code-activation-wrapper’);
const resendLink = document.querySelector(‘.app-code-activation-resend’);
const numOfFields = 6;

// Create input fields dynamically
for (let i = 0; i < numOfFields; i++) {
const input = document.createElement(‘input’);
input.type=”text”;
input.className=”form-control app-activation-code-input”;
input.maxLength = 1;
codeActivationWrapper.appendChild(input);
}

const fields = document.querySelectorAll(‘.app-activation-code-input’);

// Handle paste events
fields.forEach((field, index) => {
field.addEventListener(‘paste’, (event) => {
event.preventDefault();
const pasteData = (event.clipboardData || window.clipboardData).getData(‘text’).trim();

if (/^\d{6}$/.test(pasteData)) {
[…pasteData].forEach((char, idx) => {
if (fields[idx]) fields[idx].value = char;
});
fields[5].focus();
verifyActivationCode(Array.from(fields).map((field) => field.value).join(”));
}
});
});

// Handle input and navigation
fields.forEach((field, index) => {
field.addEventListener(‘input’, () => {
if (field.value && index < fields.length – 1) {
fields[index + 1].focus();
}
checkCompletion();
});

field.addEventListener(‘keydown’, (event) => {
if (event.key === ‘Backspace’ && !field.value && index > 0) {
fields[index – 1].focus();
}
});
});

// Check for completion
const checkCompletion = () => {
const activationCode = Array.from(fields).map((field) => field.value).join(”);
if (activationCode.length === 6) {
verifyActivationCode(activationCode);
}
};

// Simulate code verification
const verifyActivationCode = (activationCode) => {
console.log(‘Verifying code:’, activationCode);

const spinner = document.createElement(‘div’);
spinner.className=”spinner”;
document.body.appendChild(spinner);

setTimeout(() => {
spinner.remove();
if (activationCode === ‘123456’) {
alert(‘Code verified successfully!’);
} else {
alert(‘Invalid code. Try again.’);
fields.forEach((field) => (field.value=””));
fields[0].focus();
}
}, 2000);
};

// Handle resend link
resendLink.addEventListener(‘click’, (event) => {
event.preventDefault();

resendLink.setAttribute(‘data-sent’, ‘true’);
setTimeout(() => {
resendLink.setAttribute(‘data-sent’, ‘false’);
alert(‘Activation code resent!’);
}, 5000);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

این راه حل با استفاده از یک سیستم رمز عبور 6 رقمی کاربرپسند و کاملاً کاربردی ایجاد می کند جاوا اسکریپت ساده. از چسباندن، اعتبار سنجی ورودی، ناوبری یکپارچه و تأیید کد پشتیبانی می کند و تجربه ای روان را تضمین می کند. با اتصال منطق تأیید به باطن خود یا افزودن انیمیشن برای بازخورد بصری بهتر، آن را بیشتر تقویت کنید.

برای نکات بیشتر در مورد توسعه وب، بررسی کنید DailySandbox و برای ما ثبت نام کنید خبرنامه رایگان برای جلوتر ماندن از منحنی!

const codeActivationWrapper = document.querySelector('.app-code-activation-wrapper');
const numOfFields = 6;

// Create and append six input fields
for (let i = 0; i < numOfFields; i++) {
    const input = document.createElement('input');
    input.type="text";
    input.className="form-control app-activation-code-input";
    input.maxLength = 1;
    codeActivationWrapper.appendChild(input);
}

const fields = document.querySelectorAll('.app-activation-code-input');

fields.forEach((field, index) => {
    field.addEventListener('paste', (event) => {
        event.preventDefault();
        const pasteData = (event.clipboardData || window.clipboardData).getData('text').trim();

        if (/^\d{6}$/.test(pasteData)) {
            // Distribute pasted digits into input fields
            [...pasteData].forEach((char, idx) => {
                if (fields[idx]) fields[idx].value = char;
            });
            fields[5].focus(); // Focus the last field
            verifyActivationCode(); // Call verification
        }
    });
});

fields.forEach((field, index) => {
    field.addEventListener('input', () => {
        if (field.value && index < fields.length - 1) {
            fields[index + 1].focus();
        }
        checkCompletion(); // Check if all fields are filled
    });

    field.addEventListener('keydown', (event) => {
        if (event.key === 'Backspace' && !field.value && index > 0) {
            fields[index - 1].focus();
        }
    });
});

const checkCompletion = () => {
    const activationCode = Array.from(fields).map((field) => field.value).join('');
    if (activationCode.length === 6) {
        verifyActivationCode(activationCode);
    }
};

const verifyActivationCode = (activationCode) => {
    console.log('Verifying code:', activationCode);

    const spinner = document.createElement('div');
    spinner.className="spinner";
    document.body.appendChild(spinner);

    // Simulate an AJAX request
    setTimeout(() => {
        spinner.remove();
        if (activationCode === '123456') {
            alert('Code verified successfully!');
        } else {
            alert('Invalid code. Try again.');
            fields.forEach((field) => (field.value=""));
            fields[0].focus();
        }
    }, 2000);
};

const resendLink = document.querySelector('.app-code-activation-resend');

resendLink.addEventListener('click', (event) => {
    event.preventDefault();

    // Simulate a resend action
    resendLink.setAttribute('data-sent', 'true');
    setTimeout(() => {
        resendLink.setAttribute('data-sent', 'false');
        alert('Activation code resent!');
    }, 5000);
});

const codeActivationWrapper = document.querySelector('.app-code-activation-wrapper');
const resendLink = document.querySelector('.app-code-activation-resend');
const numOfFields = 6;

// Create input fields dynamically
for (let i = 0; i < numOfFields; i++) {
    const input = document.createElement('input');
    input.type="text";
    input.className="form-control app-activation-code-input";
    input.maxLength = 1;
    codeActivationWrapper.appendChild(input);
}

const fields = document.querySelectorAll('.app-activation-code-input');

// Handle paste events
fields.forEach((field, index) => {
    field.addEventListener('paste', (event) => {
        event.preventDefault();
        const pasteData = (event.clipboardData || window.clipboardData).getData('text').trim();

        if (/^\d{6}$/.test(pasteData)) {
            [...pasteData].forEach((char, idx) => {
                if (fields[idx]) fields[idx].value = char;
            });
            fields[5].focus();
            verifyActivationCode(Array.from(fields).map((field) => field.value).join(''));
        }
    });
});

// Handle input and navigation
fields.forEach((field, index) => {
    field.addEventListener('input', () => {
        if (field.value && index < fields.length - 1) {
            fields[index + 1].focus();
        }
        checkCompletion();
    });

    field.addEventListener('keydown', (event) => {
        if (event.key === 'Backspace' && !field.value && index > 0) {
            fields[index - 1].focus();
        }
    });
});

// Check for completion
const checkCompletion = () => {
    const activationCode = Array.from(fields).map((field) => field.value).join('');
    if (activationCode.length === 6) {
        verifyActivationCode(activationCode);
    }
};

// Simulate code verification
const verifyActivationCode = (activationCode) => {
    console.log('Verifying code:', activationCode);

    const spinner = document.createElement('div');
    spinner.className="spinner";
    document.body.appendChild(spinner);

    setTimeout(() => {
        spinner.remove();
        if (activationCode === '123456') {
            alert('Code verified successfully!');
        } else {
            alert('Invalid code. Try again.');
            fields.forEach((field) => (field.value=""));
            fields[0].focus();
        }
    }, 2000);
};

// Handle resend link
resendLink.addEventListener('click', (event) => {
    event.preventDefault();

    resendLink.setAttribute('data-sent', 'true');
    setTimeout(() => {
        resendLink.setAttribute('data-sent', 'false');
        alert('Activation code resent!');
    }, 5000);
});