Reactjs - input mask without jquery

Question

I'm trying to make an input mask without using jquery. Only using the states of reactjs.

But, whenever he formats the field, I can't erase what was written on it. I will put my code below, in case you have any other way to do this I also accept.

The mask is to be in the format 9999999-9

My code:

const [accountRegex, setAccountRegex] = React.useState('');

function handleAccountRegex(event) {
    setAccountRegex(event.target.value)

    if (accountRegex.length === 8) {
        setAccountRegex(accountRegex.replace(/(\d{7})(\d{1})/g, "$1-$2"))
    }
}

<Input name="account" label="Conta" required={true} onChange={handleAccountRegex} value={accountRegex} maxLength='8' />

I've never done this, but seems like you might want to look into creating a second const to store the actual value but then you just need a way to prevent the masked value from overwriting the unmasked value — SUMguy
– SUMguy, Commented Jul 29, 2020 at 22:34

StackedQ · Accepted Answer · 2020-07-29 23:34:57Z

1

I've made some changes:

function handleAccountRegex(event) {
    // first make sure input doesn't contain the "-" character in it
    // because it will mess up the "backspace" key functionality
    let val = event.target.value.replace("-", "")

    // if input value is 8 digits mask it
    if (val.length === 8) {
        setAccountRegex(val.replace(/(\d{7})(\d{1})/g, "$1-$2"))
    }
    // else just store the changes
    else setAccountRegex(val)
}

answered Jul 29, 2020 at 23:34

StackedQ

4,1491 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reactjs - input mask without jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related