dmikester1•2y ago

dmikester1 – 19-23 Jul 19

anyone have any experience with masking inputs? I just want a very simple mask that looks like this 999-9999. I would like to avoid using a plugin for this simple use case.

2 Replies

dmikester1OP•2y ago

I figured out a way that serves my purposes. Not sure if it is the best way or not, but it works. This is a React app, by the way.

const setTheItemID = (e) => {
    let val = e.target.value.replace('-', '');
    console.log(val);
    if (val.length < 8) {
        const re = /^[0-9\b]+$/;
        if (val === '' || re.test(val)) {
            if (val.length > 3) {
                val = val.slice(0, 3) + '-' + val.slice(3);
            }
            setItemID(val);
        }
    } else {
        val = val.slice(0, 3) + '-' + val.slice(3, 10);
        setItemID(val);
    }
};

const setTheItemID = (e) => {
    let val = e.target.value.replace('-', '');
    console.log(val);
    if (val.length < 8) {
        const re = /^[0-9\b]+$/;
        if (val === '' || re.test(val)) {
            if (val.length > 3) {
                val = val.slice(0, 3) + '-' + val.slice(3);
            }
            setItemID(val);
        }
    } else {
        val = val.slice(0, 3) + '-' + val.slice(3, 10);
        setItemID(val);
    }
};

Even better!

const setTheItemID = (e) => {
    let originalVal = e.target.value;
    let val = originalVal.replace('-', '');
    console.log(val);
    if (val.length < 8) {
        const re = /^[0-9\b]+$/;
        if (val === '' || re.test(val)) {
            if (val.length > 3) {
                val = val.slice(0, 3) + '-' + val.slice(3);
            }
            if (originalVal.length === 4 && originalVal[3] === '-') {
                val = val + '-';
            }
            setItemID(val);
        }
    } else {
        val = val.slice(0, 3) + '-' + val.slice(3, 9);
        setItemID(val);
    }
};

const setTheItemID = (e) => {
    let originalVal = e.target.value;
    let val = originalVal.replace('-', '');
    console.log(val);
    if (val.length < 8) {
        const re = /^[0-9\b]+$/;
        if (val === '' || re.test(val)) {
            if (val.length > 3) {
                val = val.slice(0, 3) + '-' + val.slice(3);
            }
            if (originalVal.length === 4 && originalVal[3] === '-') {
                val = val + '-';
            }
            setItemID(val);
        }
    } else {
        val = val.slice(0, 3) + '-' + val.slice(3, 9);
        setItemID(val);
    }
};

reactibot•2y ago

This thread hasn’t had any activity in 36 hours, so it’s now locked. Threads are closed automatically after 36 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1131305380937474098

dmikester1 – 19-23 Jul 19

Did you find this page helpful?