필수입력 & 자동 하이픈 넣기
⭐필수 입력창 입력 확인하기
제출 신청서폼을 만들때 필수 입력칸을 모두 채워야 제출이 가능하게
<input/>
을 제어해야했다.
const [required, setRequired] = useState(true);
function check() {
const requiredInput :any = document.querySelectorAll(".requiredInput");
counting();
for (let i = 0; i < requiredInput.length; i++) {
if (
requiredInput[i].value !== undefined &&
requiredInput[i].value.length >= 1
) {
if (i === requiredInput.length - 1) {
setRequired(false);
}
continue;
} else {
setRequired(true);
break;
}
}
}
<input type="text" className="requiredInput" onKeyUp={() => check()} />
⭐ 하이픈 넣기
const [phone, setPhone] = useState("");
const phoneRef: any = useRef();
function handlePhone(e: any) {
const phone = phoneRef.current.value.replace(/\D+/g, "");
const phoneLength = 11;
let result = "";
for (let i = 0; i < phone.length && i < phoneLength; i++) {
switch (i) {
case 3:
result += "-";
break;
case 7:
result += "-";
break;
default:
break;
}
result += phone[i];
}
phoneRef.current.value = result;
setPhone(e.target.value);
}
<input type="text" maxLength={13} onChange={handlePhone} ref={phoneRef} />
Author And Source
이 문제에 관하여(필수입력 & 자동 하이픈 넣기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@stnqls3938/필수입력-자동-하이픈-넣기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)