javascript - 如何在信用卡号的输入文本框中显示4个数字然后是空格？

Question

我尝试通过创建一个覆盖文本框的文本来做到这一点，但我没有继续，因为它会使事情变得更加复杂。

我回滚代码。

################################################# ###################################### 这是我的回滚代码：

const StepFour = (props) => {

const [number, setNumber] = useState('')
const [expiry, setExpiry] = useState('')
const [cvc, setCvc] = useState('')
const [focus, setFocus] = useState('')

const [month, setMonth] = useState('')
const [year, setYear] = useState('')

const [cardNumError, setCardNumError] = useState(false)

const dispatch = useDispatch()

const cardList = ['4571736000000075']

const handleCardNumError = () => {
    if (!cardList.includes(number) ) {
        setCardNumError(true)
    } else {
        setCardNumError(false)
    }
}

const handleCardNumError2 = () => {
    if (!cardList.includes(number) && number.length === 19 ) {
        setCardNumError(true)
    } else {
        setCardNumError(false)
    }
}

useEffect(() => {
    setExpiry(month + '/' + year)
}, [month, year])



const classes = useStyles()
return (
        <div className={classes.mainContainer}>
            <div>
                <Cards
                    number={number}
                    expiry={expiry}
                    cvc={cvc}
                    focused={focus}/>
            </div>
            <div className={classes.formInputContatiner}>
                <div>
                    <Typography
                        variant="subtitle1"
                        style={{
                            color: "black", 
                            textAlign: "left",
                            marginBottom: "5px"
                        }}>
                        Card Number
                    </Typography>
                    <div className={classes.cardNumber}>
                        <div className={classes.grid}>
                            <div className={classes.cardNumContainer}>
                                <input 
                                    className={classes.inputStyle} 
                                    type='tel'
                                    name='number'
                                    maxLength='16'
                                    placeholder='1234 1234 1234 1234'
                                    value={number}
                                    style={{
                                        color: "black",
                                        border: "1px solid",
                                        borderColor: cardNumError ? 'red' : '#ccc',
                                        display: "inline-block"
                                    }}
                                    onChange={e => {
                                        let val = e.target.value
                                        const re = /^[0-9\b]+$/
                                        if (val === '' || re.test(val)) {
                                            setNumber(val)
                                            dispatch(getCN(val))
                                        }
                                        handleCardNumError2()
                                        
                                    }}
                                    onFocus={e => {
                                        setFocus(e.target.name)
                                    }}
                                    onBlur={() => {
                                        handleCardNumError()
                                    }}/>
                            </div>
                        </div>
                        {cardNumError === true ? <Typography
                            variant="subtitle1"
                            style={{
                                color: "red", 
                            }}>
                            Your card number is invalid.
                        </Typography> : null}
                    </div>
                    
                </div>
                <div>
                    <Typography
                        variant="subtitle1"
                        style={{
                            color: "black", 
                            textAlign: "left",
                            marginBottom: "5px"
                        }}>
                        Month and Year
                    </Typography>
                    <div className={classes.dateAndCVC}>
                        <input 
                            className={classes.inputStyle2} 
                            type="text"
                            name='month'
                            placeholder='MM'
                            value={month}
                            onChange={e => {
                                setMonth(e.target.value)
                                dispatch(getCDM(e.target.value))
                            }}
                            onFocus={e => setFocus(e.target.name)}/>
                        <input 
                            className={classes.inputStyle2} 
                            type="text"
                            name='year'
                            placeholder='YY'
                            value={year}
                            onChange={e => {
                                setYear(e.target.value)
                                dispatch(getCDY(e.target.value))
                            }}
                            onFocus={e => setFocus(e.target.name)}/>
                    </div>   
                </div>   
                <div>
                    <Typography
                        variant="subtitle1"
                        style={{
                                color: "black", 
                                textAlign: "left",
                                marginBottom: "5px"
                            }}>
                        CVC
                    </Typography>
                    <input 
                            className={classes.inputStyle2} 
                            type="tel"
                            name='cvc'
                            placeholder='CVC'
                            value={cvc}
                            onChange={e => {
                                setCvc(e.target.value)
                                dispatch(getCCVC(e.target.value))
                            }}
                            onFocus={e => setFocus(e.target.name)}/>
                </div>
            </div>
        </div>
)

}

导出默认 StepFour

这是输出：

标签： javascriptreactjs

Answer 1

这是我的解决方案。我通过检查输入是否已经有 4 个字符长度然后添加它来处理卡片何时显示space。

重要的部分是当您键入每个字符时，您必须在再次space添加之前删除所有旧字符space，否则它将在输入中填充很多奇怪的space.

这是我的代码。你可以在这里看到它的动作

import React, { useState } from 'react';

function App() {
    const [card, setCard] = useState('')

    const handleCardDisplay = () => {
        const rawText = [...card.split(' ').join('')] // Remove old space
        const creditCard = [] // Create card as array
        rawText.forEach((t, i) => {
            if (i % 4 === 0) creditCard.push(' ') // Add space
            creditCard.push(t)
        })
        return creditCard.join('') // Transform card array to string
    }

    return (
        <div>
            <input 
                value={handleCardDisplay()} 
                onChange={(e) => setCard(e.target.value)}
            />
        </div>
    )
}

export default App;