diff --git a/src/components/verificationInput/index.js b/src/components/verificationInput/index.js new file mode 100644 index 0000000..8f326a5 --- /dev/null +++ b/src/components/verificationInput/index.js @@ -0,0 +1,58 @@ +import React from 'react'; +import './VerificationInput.css'; + +export default class VerificationInput extends React.Component { + + render() { + + const numOfFields = 3; + +const handleChange = e => { + const { maxLength, value, name } = e.target; + const [fieldName, fieldIndex] = name.split("-"); + + // Check if they hit the max character length + if (value.length >= maxLength) { + // Check if it's not the last input field + if (parseInt(fieldIndex, 10) < 4) { + // Get the next input field + const nextSibling = document.querySelector( + `input[name=ssn-${parseInt(fieldIndex, 10) + 1}]` + ); + + // If found, focus the next field + if (nextSibling !== null) { + nextSibling.focus(); + } + } + } +} + + + return( +